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 } 17 </style> 18 </head> 19 <body id="body"> 20 <script type="text/javascript"> 21 // Nominal original size. If the embed is smaller than this, the play and logo 22 // images get scaled appropriately. These are actually 3/4 of the sizes suggested 23 // by youtube, so the images don't get too tiny. 24 defHeight = 258; 25 defWidth = 318; 26 27 function setup() { 28 var width = document.body.clientWidth; 29 var height = document.body.clientHeight; 30 var canvas = document.getElementById("canvas"); 31 // Resize the canvas to the right size 32 canvas.width = width; 33 canvas.height = height; 34 var ctx = canvas.getContext('2d'); 35 var loadcount = 0; 36 function doload() { 37 if (++loadcount == 3) { 38 // All images are loaded, so display them. 39 // (Note that the images are loaded from javascript, so might load 40 // after document.onload fires) 41 42 playWidth = play.width; 43 playHeight = play.height; 44 logoWidth = logo.width; 45 logoHeight = logo.height; 46 var ratio = 1; 47 // If the page is smaller than it 'should' be in either dimension 48 // we scale the background, play button and logo according to the 49 // dimension that has been shrunk the most. 50 if (width / height > defWidth / defHeight && height < defHeight) { 51 ratio = height / defHeight; 52 // Stretch the background in this dimension only. 53 backgroundHeight = background.height / ratio; 54 ctx.drawImage(background, 0, 0, background.width, background.height, 55 0, (height - backgroundHeight) / 2, width, backgroundHeight); 56 } else if (width / height < defWidth / defHeight && width < defWidth) { 57 ratio = width / defWidth; 58 backgroundWidth = background.width / ratio; 59 ctx.drawImage(background, 0, 0, background.width, background.height, 60 (width - backgroundWidth) / 2, 0, backgroundWidth, height); 61 } else { 62 // In this case stretch the background in both dimensions to fill the space. 63 ctx.drawImage(background, 0, 0, width, height); 64 } 65 playWidth *= ratio; 66 playHeight *= ratio; 67 logoWidth *= ratio; 68 logoHeight *= ratio; 69 playLeft = (width - playWidth) / 2; 70 playTop = (height - playHeight) / 2; 71 ctx.drawImage(play, playLeft, playTop, playWidth, playHeight); 72 ctx.globalAlpha = 0.7 73 ctx.drawImage(logo, width - logoWidth, height - logoHeight, logoWidth, logoHeight); 74 // To make it slightly easier to hit, the click target is twice the width/height of the unscaled play button 75 targetLeft = width / 2 - play.width; 76 targetRight = width / 2 + play.width; 77 targetTop = height / 2 - play.height; 78 targetBottom = height / 2 + play.height; 79 80 canvas.addEventListener("click", function(e) { 81 var posx = e.clientX-canvas.offsetLeft; 82 var posy = e.clientY-canvas.offsetTop; 83 if (posx >= targetLeft && posx <= targetRight && 84 posy >= targetTop && posy <= targetBottom) { 85 top.location.href = "vnd.youtube:VIDEO_ID"; 86 } 87 }, false); 88 } 89 } 90 var background = new Image(); 91 background.onload = doload; 92 background.src = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; 93 play = new Image(); 94 play.onload = doload; 95 play.src = "play.png"; 96 logo = new Image(); 97 logo.onload = doload; 98 logo.src = "youtube.png"; 99 } 100 window.onload = setup; 101 </script> 102 <div id="main"> 103 <canvas id="canvas"></canvas> 104 </div> 105 </body> 106 </html> 107
