mirror of
https://github.com/bradfrost/this-is-responsive.git
synced 2026-01-15 00:58:04 -05:00
136 lines
4.8 KiB
HTML
136 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset='utf-8' />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="stylesheet" type="text/css" media="all" href="../styles.css">
|
||
<title>Responsive Pattern | This Is Responsive</title>
|
||
<script type="text/javascript" src="../js/modernizr.js"></script>
|
||
</head>
|
||
<body>
|
||
<!--Pattern CSS-->
|
||
<style id="s" type="text/css">
|
||
iframe {
|
||
display: block;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
</style>
|
||
<!--End Pattern CSS-->
|
||
|
||
<!--Pattern HTML-->
|
||
<div id="pattern" class="pattern">
|
||
<div id="vid-container">
|
||
<iframe 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>
|
||
</div>
|
||
<!--End Pattern HTML-->
|
||
|
||
<!--Pattern JS (if needed)-->
|
||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
/*global jQuery */
|
||
/*!
|
||
* FitVids 1.0
|
||
*
|
||
* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
|
||
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
|
||
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
|
||
*
|
||
* Date: Thu Sept 01 18:00:00 2011 -0500
|
||
*/
|
||
|
||
(function( $ ){
|
||
|
||
$.fn.fitVids = function( options ) {
|
||
var settings = {
|
||
customSelector: null
|
||
}
|
||
|
||
var div = document.createElement('div'),
|
||
ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
|
||
|
||
div.className = 'fit-vids-style';
|
||
div.innerHTML = '<style> \
|
||
.fluid-width-video-wrapper { \
|
||
width: 100%; \
|
||
position: relative; \
|
||
padding: 0; \
|
||
} \
|
||
\
|
||
.fluid-width-video-wrapper iframe, \
|
||
.fluid-width-video-wrapper object, \
|
||
.fluid-width-video-wrapper embed { \
|
||
position: absolute; \
|
||
top: 0; \
|
||
left: 0; \
|
||
width: 100%; \
|
||
height: 100%; \
|
||
} \
|
||
</style>';
|
||
|
||
ref.parentNode.insertBefore(div,ref);
|
||
|
||
if ( options ) {
|
||
$.extend( settings, options );
|
||
}
|
||
|
||
return this.each(function(){
|
||
var selectors = [
|
||
"iframe[src^='http://player.vimeo.com']",
|
||
"iframe[src^='http://www.youtube.com']",
|
||
"iframe[src^='https://www.youtube.com']",
|
||
"iframe[src^='http://www.kickstarter.com']",
|
||
"object",
|
||
"embed"
|
||
];
|
||
|
||
if (settings.customSelector) {
|
||
selectors.push(settings.customSelector);
|
||
}
|
||
|
||
var $allVideos = $(this).find(selectors.join(','));
|
||
|
||
$allVideos.each(function(){
|
||
var $this = $(this);
|
||
if (this.tagName.toLowerCase() == 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
|
||
var height = this.tagName.toLowerCase() == 'object' ? $this.attr('height') : $this.height(),
|
||
aspectRatio = height / $this.width();
|
||
if(!$this.attr('id')){
|
||
var videoID = 'fitvid' + Math.floor(Math.random()*999999);
|
||
$this.attr('id', videoID);
|
||
}
|
||
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
|
||
$this.removeAttr('height').removeAttr('width');
|
||
});
|
||
});
|
||
|
||
}
|
||
})( jQuery );
|
||
|
||
$("#vid-container").fitVids();});
|
||
</script>
|
||
<div class="container">
|
||
<section class="pattern-description">
|
||
<h1>Fluid Video</h1>
|
||
<p>Scaling videos is different than images because videos don’t retain their proportions. </p>
|
||
<h2>Considerations</h2>
|
||
<ul>
|
||
<li>Default to HTML5 video formats and have a Flash version as a backup.</li>
|
||
<li>Use a third-party service like Youtube and Vimeo instead of hosting things internally. Those large providers have ironed out a lot of the codec/streaming/optimization issues, which lets you concentrate on other things.</li>
|
||
<li>Check out <a href="http://fitvidsjs.com/">Fitvids</a></li>
|
||
<li>Read <a href="http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/">Creating Intrinsic Ratios for Video</a></li>
|
||
</ul>
|
||
</section>
|
||
<footer role="contentinfo">
|
||
<div>
|
||
<nav id="menu">
|
||
<a href="../patterns.html">←More Responsive Patterns</a>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|