File: D:/HostingSpaces/Velosophe/carparkcannonball.cc/wwwroot/bower_components/fitvids/tests.html
<!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>