forked from toddmotto/fluidvids
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (67 loc) · 2.78 KB
/
index.html
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
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive and fluid YouTube and Vimeo videos with JavaScript | toddmotto.com</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="@toddmotto">
<style>
* {margin:0;padding:0;}
a img {border:none;}
a {text-decoration:none;}
body {font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#444;background:#FFF url(img/background.jpg) top left repeat-y;}
.wrapper {width:40%;margin:0 auto;position:relative;text-align:center;}
#header {overflow:auto;background:#33363C;border-top:5px solid #2F3135;border-bottom:2px solid #04A4CC;}
#logo {float:left;margin:10px 0 5px 40px;}
#logo img {width:80px;height:36px;}
#view-tut {float:right;font-size:13px;font-weight:900;margin:10px 40px 5px 0;}
#view-tut ul {margin:0;}
#view-tut ul li {display:inline-block;*display:inline;zoom:1;margin:0 5px 0 0;}
#view-tut ul li a {display:block;padding:5px 10px;background:#04A4CC;color:#FFF;border-radius:20px;}
#view-tut ul li a:hover {background:#0097CD;}
/* Some basic Demo styles */
img[src*="resize.png"] {margin:25px 0 0;max-width:100%;}
.video-wrap {background:#000;box-shadow:0 1px 4px #000;margin:30px 0;}
@media only screen and (min-width: 320px) {
.wrapper {width:95%;}
}
@media only screen and (min-width: 700px) {
.wrapper {width:95%;}
}
@media only screen and (min-width: 800px) {
.wrapper {width:40%;}
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="http://www.toddmotto.com">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<div id="view-tut">
<ul>
<li><a href="http://www.toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js">Visit the Tutorial</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<img src="img/resize.png" alt="Resize">
<iframe width="560" height="315" src="http://www.youtube.com/embed/JMl8cQjBfqk" frameborder="0" allowfullscreen></iframe>
<iframe src="http://player.vimeo.com/video/43022942" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<!-- FluidVids.js -->
<script src="js/fluidvids.js"></script>
<!-- Analytics (Demo only) -->
<script>
var _gaq=[['_setAccount','UA-20440416-10'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)})(document,'script');
</script>
<!-- Influads Script (Demo only) -->
<script src="http://www.toddmotto.com/influads/ads.js"></script>
</body>
</html>