blob: 8e103c1655e16935e724b8b262c71c9f3b39433d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<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>
|
