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 ctx.drawImage(background, 0, 0, width, height); 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 play button and logo according to the dimension that 49 // has been shrunk the most. 50 if (width / height > defWidth / defHeight && height < defHeight) { 51 ratio = height / defHeight; 52 } else if (width / height < defWidth / defHeight && width < defWidth) { 53 ratio = width / defWidth; 54 } 55 playWidth *= ratio; 56 playHeight *= ratio; 57 logoWidth *= ratio; 58 logoHeight *= ratio; 59 playLeft = (width - playWidth) / 2; 60 playTop = (height - playHeight) / 2; 61 ctx.drawImage(play, playLeft, playTop, playWidth, playHeight); 62 ctx.globalAlpha = 0.7 63 ctx.drawImage(logo, width - logoWidth, height - logoHeight, logoWidth, logoHeight); 64 // To make it slightly easier to hit, the click target is twice the width/height of the unscaled play button 65 targetLeft = width / 2 - play.width; 66 targetRight = width / 2 + play.width; 67 targetTop = height / 2 - play.height; 68 targetBottom = height / 2 + play.height; 69 70 canvas.addEventListener("click", function(e) { 71 var posx = e.clientX-canvas.offsetLeft; 72 var posy = e.clientY-canvas.offsetTop; 73 if (posx >= targetLeft && posx <= targetRight && 74 posy >= targetTop && posy <= targetBottom) { 75 top.location.href = "vnd.youtube:VIDEO_ID"; 76 } 77 }, false); 78 } 79 } 80 var background = new Image(); 81 background.onload = doload; 82 background.src = "http://img.youtube.com/vi/VIDEO_ID/0.jpg"; 83 play = new Image(); 84 play.onload = doload; 85 play.src = "play.png"; 86 logo = new Image(); 87 logo.onload = doload; 88 logo.src = "youtube.png"; 89 } 90 window.onload = setup; 91 </script> 92 <div id="main"> 93 <canvas id="canvas"></canvas> 94 </div> 95 </body> 96 </html> 97
