mnlwldr/youtube-player-api-fun.html

## youtube-player-api-fun.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div style="margin: auto;width: 800px;">
    <div id="player"></div>
</div>

<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '500',
            width: '800',
            videoId: 'yEbrvMljMCg',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
            }
        });

        console.log("iframe ready");
    }

    function onPlayerReady(event) {

        console.log("player ready");

        fadeBackground();

        event.target.playVideo();

        var lastVolume = -1;

        var checkPlayerVolume = function() {
            if(lastVolume != -1) {
                if(player.getVolume() != lastVolume) {
                    volumeChanged();
                }
            }
            lastVolume = player.getVolume();
            setTimeout(checkPlayerVolume, 100);
        }
        setTimeout(checkPlayerVolume, 100);

        var interval = 1000;
        var lastTime = -1;

        var checkPlayerTime = function () {
            if (lastTime != -1) {
                if(player.getPlayerState() == YT.PlayerState.PLAYING ) {
                    var t = player.getCurrentTime();
                    if (Math.abs(t - lastTime - 1) > 0.5) {
                        videoSeeked(t);
                    }
                }
            }
            lastTime = player.getCurrentTime();
            setTimeout(checkPlayerTime, interval);
        }
        setTimeout(checkPlayerTime, interval);
    }

    var done = false;
    function onPlayerStateChange(event) {
        console.log("state change");

        fadeBackground()

        if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }

        var t = player.getCurrentTime();

        switch(event.data) {
            case -1:
                console.log("unstarted at" + t)
                break;
            case 0:
                console.log("stopped at " + t);
                break;
            case 1:
                console.log("playing at " + t);
                break;
            case 2:
                console.log("paused at " + t);
                break;
            case 3:
                console.log("buffering at " + t);
                break;
            case 5:
                console.log("cued at " + t)
                player.playVideo();
                break;
            default:
                console.log("unknown event: " + event.data)
        }
    }

    function fadeBackground()
    {
        var rgb = [];
        for(var i = 0; i < 3; i++) {
            rgb.push(Math.floor(Math.random() * 255));
        }
        document.body.style.backgroundColor = 'rgb('+ rgb.join(',') +')';
        console.log("fade bg to " + document.body.style.backgroundColor)
    }

    function volumeChanged()
    {
        console.log("volume changed to " + player.getVolume());
        fadeBackground();
    }

    function videoSeeked(t)
    {
        console.log("seek to " + t);
    }

    function stopVideo() {
        console.log("stopped");
        player.stopVideo();
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>

	<div style="margin: auto;width: 800px;">
	<div id="player"></div>
	</div>

	<script>
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '500',
	width: '800',
	videoId: 'yEbrvMljMCg',
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange,
	}
	});

	console.log("iframe ready");
	}

	function onPlayerReady(event) {

	console.log("player ready");

	fadeBackground();

	event.target.playVideo();

	var lastVolume = -1;

	var checkPlayerVolume = function() {
	if(lastVolume != -1) {
	if(player.getVolume() != lastVolume) {
	volumeChanged();
	}
	}
	lastVolume = player.getVolume();
	setTimeout(checkPlayerVolume, 100);
	}
	setTimeout(checkPlayerVolume, 100);

	var interval = 1000;
	var lastTime = -1;

	var checkPlayerTime = function () {
	if (lastTime != -1) {
	if(player.getPlayerState() == YT.PlayerState.PLAYING ) {
	var t = player.getCurrentTime();
	if (Math.abs(t - lastTime - 1) > 0.5) {
	videoSeeked(t);
	}
	}
	}
	lastTime = player.getCurrentTime();
	setTimeout(checkPlayerTime, interval);
	}
	setTimeout(checkPlayerTime, interval);
	}

	var done = false;
	function onPlayerStateChange(event) {
	console.log("state change");

	fadeBackground()

	if (event.data == YT.PlayerState.PLAYING && !done) {
	setTimeout(stopVideo, 6000);
	done = true;
	}

	var t = player.getCurrentTime();

	switch(event.data) {
	case -1:
	console.log("unstarted at" + t)
	break;
	case 0:
	console.log("stopped at " + t);
	break;
	case 1:
	console.log("playing at " + t);
	break;
	case 2:
	console.log("paused at " + t);
	break;
	case 3:
	console.log("buffering at " + t);
	break;
	case 5:
	console.log("cued at " + t)
	player.playVideo();
	break;
	default:
	console.log("unknown event: " + event.data)
	}
	}

	function fadeBackground()
	{
	var rgb = [];
	for(var i = 0; i < 3; i++) {
	rgb.push(Math.floor(Math.random() * 255));
	}
	document.body.style.backgroundColor = 'rgb('+ rgb.join(',') +')';
	console.log("fade bg to " + document.body.style.backgroundColor)
	}

	function volumeChanged()
	{
	console.log("volume changed to " + player.getVolume());
	fadeBackground();
	}

	function videoSeeked(t)
	{
	console.log("seek to " + t);
	}

	function stopVideo() {
	console.log("stopped");
	player.stopVideo();
	}
	</script>
	</body>
	</html>