| <html> |
| <head> |
| <style type="text/css"> |
| body { background-color: black; } |
| a:hover { text-decoration: none; } |
| a:link { color: black; } |
| a:visited { color: black; } |
| #main { |
| position: absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| padding: 0%; |
| z-index: 10; |
| background-size: 100%; |
| background: no-repeat; |
| background-position: center; |
| } |
| #play { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| } |
| #logo { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| } |
| </style> |
| </head> |
| <body id="body"> |
| <script type="text/javascript"> |
| function setup() { |
| var width = document.body.clientWidth; |
| var height = document.body.clientHeight; |
| var mainElement = document.getElementById("main"); |
| var playElement = document.getElementById("play"); |
| var loadcount = 0; |
| var POSTER = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; |
| |
| function doload() { |
| if (++loadcount == 2) { |
| // Resize the element to the right size |
| mainElement.width = width; |
| mainElement.height = height; |
| mainElement.style.backgroundImage = "url('" + POSTER + "')"; |
| // Center the play button |
| playElement.style.marginTop = "-" + play.height/2 + "px"; |
| playElement.style.marginLeft = "-" + play.width/2 + "px"; |
| playElement.addEventListener("click", function(e) { |
| top.location.href = "vnd.youtube:VIDEO_ID"; |
| }, false); |
| } |
| } |
| var background = new Image(); |
| background.onload = doload; |
| background.src = POSTER; |
| play = new Image(); |
| play.onload = doload; |
| play.src = "play.png"; |
| } |
| |
| window.onload = setup; |
| </script> |
| <div id="main"> |
| <img src="play.png" id="play"></img> |
| <img src="youtube.png" id="logo"></img> |
| </div> |
| </body> |
| </html> |
