JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Random Youtube Video</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="video"></div>

	<script src="http://www.youtube.com/player_api"></script>
	<script>
	    var player,
	    	playedVideos = [],
	    	playList = [],
    		currentVideo,
	    	width = 768,
	    	height = 462,
	    	videoContainer = '<div id="video"></div>',
	    	videoStreams = ['6Lh7Zg8WXwU', 'y10OdAZOBQ8', 'uc_HPel98wg', 'Jrd25gjyDhE'];
	
	    Array.prototype.shuffle = function () {
	        for (var i = this.length - 1; i > 0; i--) {
	            var j = Math.floor(Math.random() * (i + 1));
	            var tmp = this[i];
	            this[i] = this[j];
	            this[j] = tmp;
	        }
	
	        return this;
	    };

	    videoStreams.shuffle();
	    playList = videoStreams.slice();

	    function randomVideo() {
	    	if (playedVideos.length == videoStreams.length) {
	    		playedVideos = [];
	    		videoStreams.shuffle();
	    		playList = videoStreams.slice();
		    }

	    	currentVideo = playList[0];
	    	playedVideos.push(playList.shift());
	    	return currentVideo;
	    };

	    function onYouTubePlayerAPIReady() {
	        player = new YT.Player('video', {
	          height: height,
	          width: width,
	          videoId: randomVideo(),
	          events: {
	        	'onReady': onPlayerReady,
	            'onStateChange': onPlayerStateChange
	          }
	        });
	    };

	    function onPlayerReady(event) {
	    	event.target.playVideo();
	    	event.target.setPlaybackQuality('hd720');
	    }
	
	    function onPlayerStateChange(event) {        
	        if(event.data === 0) {   
	        	$('#video').fadeOut(4000, function() {
	        		document.location.reload();
		        });
	        }
	    };
	</script>
</body>
</html>