V I D E O - R W D

by lovromar

HTML

<div id="main">
    
    <article>
        <header>
            <iframe id="myvideos" src="http://player.vimeo.com/video/35465995?portrait=0&amp;color=ffffff" width="580" height="326" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </header>
        <section>
            <p>Video 1 Caption</p>
        </section>
    </article>
    
    <article>
        <header>
            <iframe width="560" height="315" src="http://www.youtube.com/embed/c2ivYqToCLQ" frameborder="0" allowfullscreen></iframe>
        </header>
        <section>
            <p>Video 2 Caption</p>
        </section>
    </article>
    
    <article>
        <header>
            <iframe src="http://player.vimeo.com/video/35546493?title=0&amp;byline=0&amp;portrait=0" width="580" height="326" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </header>
        <section>
            <p>Video 3 Caption</p>
        </section>
    </article>
    
    <article>
        <header>
            <iframe src="http://player.vimeo.com/video/34792993?title=0&amp;byline=0&amp;portrait=0" width="580" height="326" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </header>
        <section>
            <p>Video 4 Caption</p>
        </section>
    </article>
    
    <article>
        <header>
            <iframe src="http://player.vimeo.com/video/35514005?byline=0&amp;portrait=0" width="580" height="326" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </header>
        <section>
            <p>Video 5 Caption</p>
        </section>
    </article> 
    
</div>

<!--
example borrowed from:
https://github.com/davatron5000/FitVids.js/issues/33

by:
https://github.com/jonathanmoore
-->

CSS

#main { width: 100%; }
article {
    width: auto;
    background: grey;
    margin: 20px;
    padding: 20px;
}
article p { margin: 20px 0; }

JavaScript

/*

FitVids.js: 
Create a wrapper around the iframe to preserve the aspect ratio.

*/


/* 
* 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 = '&shy;<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^='http://www.kickstarter.com']", 
        "object", 
        "embed"
      ];
      
      if (settings.customSelector) {
        selectors.push(settings.customSelector);
      }
      
      var $allVideos =...