Rickroll

rickroll.html

<meta charset="utf-8">

<style>
iframe {
	position: absolute;
	width: 100vw;
	height: 100vh;
}

</style>

<div style="position: relative">
<button type="button" id="btnPlay" style="width: 300px; font-size: 36px;">
	Lataa kuvat ja video	
</button>

<!--
<iframe id="video"
	width="640" height="360"
	frameborder="0"
	style="display: none; position: absolute; width: 100vw; height: 100vh;"
	allow="autoplay"
 ></iframe>
-->

<div>
	<div id="foo"></div>
</div>

<div id="overlay" style="display: none; position: absolute; width: 100vw; height: 100vh; z-index: -1">
</div>

</div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

var player;

$("body").on("click", "#btnPlay", function () {
	$("#btnPlay").hide();
	//$("#video")[0].src = "https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1";
	//$("#video").show();

	$("body").css("margin",0);

	// Enable navigation prompt
	window.onbeforeunload = function() {
	    return true;
	};


	player = new YT.Player('foo', {
		videoId: 'oHg5SJYRHA0',   // YouTube Video ID
		width: 480,               // Player width (in px)
		height: 640,              // Player height (in px)
		playerVars: {
			autoplay: 1,        // Auto-play the video on load
			controls: 0,        // Show pause/play buttons in player
			showinfo: 0,        // Hide the video title
			modestbranding: 1,  // Hide the Youtube Logo
			loop: 1,            // Run the video in a loop
			fs: 0,              // Hide the full screen button
			cc_load_policy: 0, // Hide closed captions
			iv_load_policy: 3,  // Hide the Video Annotations
			autohide: 0         // Hide video controls when playing
		},
		events: {
			onReady: function(e) {
				console.log("onReady");
				console.log(e);

				//e.target.mute();
				e.target.playVideo();

				setTimeout(() => {
					$("#overlay").show();
					$("#overlay").css('z-index', 100);
					$("#overlay").focus();
				}, 1);
			}
		}
	});

});

function onYouTubeIframeAPIReady() {
	console.log("youtube iframe api ready");
}
</script>