You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
3.4 KiB
82 lines
3.4 KiB
6 years ago
|
<!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>
|