forked from davatron5000/FitVids.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tests.html
81 lines (74 loc) · 3.44 KB
/
tests.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
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fluid Width Videos with Fitvids.js</title>
<style>
body {
background: #ddd;
}
video {
max-width: 100%;
height: auto;
}
iframe,
embed,
object {
max-width: 100%;
}
.container {
width: 70%;
padding: 5%;
margin:0px auto;
background:#fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
.vendor {
padding: 2%;
background: #d1eed1;
margin-bottom: 2em;
}
.unsupported {
background: #fddfde;
}
</style>
</head>
<body>
<div class="container">
<div class="vendor">
<iframe width="425" height="349" src="http://www.youtube.com/embed/FKWwdQu6_ok" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vendor">
<iframe src="http://player.vimeo.com/video/25708134?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
</div>
<div class="vendor">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="437" height="288" id="viddler"><param name="movie" value="http://www.viddler.com/player/d6c37b62/" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="flashvars" value="fake=1"/><embed src="http://www.viddler.com/player/d6c37b62/" width="437" height="288" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" flashvars="fake=1" name="viddler" ></embed></object>
</div>
<div class="vendor">
<embed src="http://blip.tv/play/AYHCnikC" type="application/x-shockwave-flash" width="550" height="396" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" ></embed>
</div>
<div class="vendor">
<iframe frameborder="0" height="410px" src="http://www.kickstarter.com/projects/30453381/the-shape-of-design/widget/video.html" width="480px"></iframe>
</div>
<div class="vendor">
<iframe frameborder="0" height="380" src="http://www.kickstarter.com/projects/150422311/screencasting-a-complete-redesign/widget/card.html" width="220"></iframe>
</div>
<p>^^ The above kickstarter widget should fail.</p>
<div class="vendor">
<iframe width="520px" height="391px" src="http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vendor">
<iframe class="fitvidsignore" src="http://player.vimeo.com/video/28523422?title=0&byline=0&portrait=0&color=4584be" width="800/embed/?moog_width=800" height="450" frameborder="0"></iframe>
</div>
<p>^^ The above vimeo embed should fail. It has a class of 'fitvidsignore'.
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fitvids.js"></script>
<script>
// Basic FitVids Test
$(".container").fitVids();
// Custom selector and No-Double-Wrapping Prevention Test
$(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});
</script>
</body>
</html>