lampac/lampa-main/youtube.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Bridge</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        #player {
            width: 100%;
            height: 100%;
        }

        iframe {
            border: 0;
			position: absolute;
			left: 0;
			top: -300px;
            transform-origin: left top;
			transform: scale(0.5);
			-webkit-transform-origin: left top;
			 -moz-transform-origin: left top;
			  -ms-transform-origin: left top;
			   -o-transform-origin: left top;
				  transform-origin: left top;
			-webkit-transform: scale(0.5);
			 -moz-transform: scale(0.5);
			  -ms-transform: scale(0.5);
			   -o-transform: scale(0.5);
				  transform: scale(0.5);
        }
    </style>
</head>
<body>
    <div id="player"></div>

    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
		function gup(name, url){
			if(!url) url = location.href

			name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]")

			var regexS  = "[\\?&]" + name + "=([^&#]*)"
			var regex   = new RegExp(regexS)
			var results = regex.exec(url)

			return results == null ? null : results[1]
		}

		var bridgeId = gup('bridgeId') || ''
		var videoId  = gup('videoId') || ''
		var autoplay = Number(gup('autoplay') || '1')
		var controls = Number(gup('controls') || '1')
		var mute     = Number(gup('mute') || '0')
		var start    = Number(gup('start') || '0')

		var player = null
		var ready  = false
		var timer  = null

		var screen_size = 2

		function send(type, data){
			if(typeof data === 'undefined') data = {}

			try{
				parent.postMessage({
					bridgeId: bridgeId,
					type: type,
					data: data
				}, '*')
			}
			catch(e){}
		}

		function tick(){
			if(!player || !ready) return

			try{
				send('time', {
					currentTime: player.getCurrentTime(),
					duration: player.getDuration(),
					playerState: player.getPlayerState(),
					playbackQuality: player.getPlaybackQuality ? player.getPlaybackQuality() : ''
				})
			}
			catch(e){}
		}

		function startTimer(){
			stopTimer()
			timer = setInterval(tick, 100)
		}

		function stopTimer(){
			if(timer){
				clearInterval(timer)
				timer = null
			}
		}

		function resize(){
			var width  = window.innerWidth * screen_size
			var height = (window.innerHeight + 600) * screen_size
			var iframe = document.getElementById('player')

			if(iframe){
				iframe.style.width  = width + 'px'
				iframe.style.height = height + 'px'
			}
		}

		window.onYouTubeIframeAPIReady = function(){
			player = new YT.Player('player', {
				videoId: videoId,
				width: '100%',
				height: '100%',
				playerVars: {
					autoplay: autoplay,
					controls: controls,
					mute: mute,
					start: start,
					rel: 0,
					modestbranding: 1,
					playsinline: 1,
					enablejsapi: 1,
					origin: location.origin
				},
				events: {
					onReady: function(){
						ready = true
						send('ready')
						tick()
						startTimer()
					},
					onStateChange: function(event){
						send('stateChange', { state: event.data })
					},
					onPlaybackQualityChange: function(event){
						send('qualityChange', { quality: event.data })
					},
					onError: function(event){
						send('error', { error: event.data })
					}
				}
			})

			resize()
		}

		window.addEventListener('message', function(event){
			if(!event.data || event.data.bridgeId !== bridgeId) return

			var type = event.data.type
			var data = event.data.data

			if(type === 'init'){
				if(player && ready && typeof data.volume === 'number'){
					try{
						player.setVolume(data.volume)
					}
					catch(e){}
				}
				return
			}

			if(!player || !ready) return

			try{
				if(type === 'play'){
					player.playVideo()
				}
				else if(type === 'pause'){
					player.pauseVideo()
				}
				else if(type === 'seekTo'){
					player.seekTo(data.time, true)
				}
				else if(type === 'setVolume'){
					player.setVolume(data.volume)
				}
				else if(type === 'resize'){
					resize()

					if(typeof player.setSize === 'function'){
						player.setSize(data.width, data.height)
					}
				}
				else if(type === 'setPlaybackRate'){
					if(typeof player.setPlaybackRate === 'function'){
						player.setPlaybackRate(data.rate)
					}
				}
				else if(type === 'destroy'){
					stopTimer()

					try{
						player.destroy()
					}
					catch(e){}

					player = null
					ready = false
				}

				tick()
			}
			catch(e){}
		})

		send('bridgeReady')

    </script>
</body>
</html>