1 <html> 2 <head> 3 <style type="text/css"> 4 body { background-color: black; } 5 a:hover { text-decoration: none; } 6 a:link { color: black; } 7 a:visited { color: black; } 8 #main { 9 position: absolute; 10 left: 0%; 11 top: 0%; 12 width: 100%; 13 height: 100%; 14 padding: 0%; 15 z-index: 10; 16 background-size: 100%; 17 background: no-repeat; 18 background-position: center; 19 } 20 #play { 21 position: absolute; 22 left: 50%; 23 top: 50%; 24 } 25 #logo { 26 position: absolute; 27 bottom: 0; 28 right: 0; 29 } 30 </style> 31 </head> 32 <body id="body"> 33 <script type="text/javascript"> 34 function setup() { 35 var width = document.body.clientWidth; 36 var height = document.body.clientHeight; 37 var mainElement = document.getElementById("main"); 38 var playElement = document.getElementById("play"); 39 var loadcount = 0; 40 var POSTER = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; 41 42 function doload() { 43 if (++loadcount == 2) { 44 // Resize the element to the right size 45 mainElement.width = width; 46 mainElement.height = height; 47 mainElement.style.backgroundImage = "url('" + POSTER + "')"; 48 // Center the play button 49 playElement.style.marginTop = "-" + play.height/2 + "px"; 50 playElement.style.marginLeft = "-" + play.width/2 + "px"; 51 playElement.addEventListener("click", function(e) { 52 top.location.href = "vnd.youtube:VIDEO_ID"; 53 }, false); 54 } 55 } 56 var background = new Image(); 57 background.onload = doload; 58 background.src = POSTER; 59 play = new Image(); 60 play.onload = doload; 61 play.src = "play.png"; 62 } 63 64 window.onload = setup; 65 </script> 66 <div id="main"> 67 <img src="play.png" id="play"></img> 68 <img src="youtube.png" id="logo"></img> 69 </div> 70 </body> 71 </html> 72
