YouTube Embed v0.11

by Aaron Kahlhamer

HTML

<div class="video-container">
    <div class="video-flexible">
        <img src="http://media.kohls.com.edgesuite.net/is/image/kohls/beauty-lp-130924-video-12?scl=1&qlt=40" alt=""/>
        <span class="video-corner-piece"></span>
        <span class="video-play-button"></span>
        <iframe class="video-youtube" data-src="//www.youtube.com/embed/7JqiCcof4eY?wmode=transparent&rel=0&autoplay=1&showinfo=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen width="386" height="217" wmode="transparent"></iframe>
      </div>
</div>

CSS

.video-container,
.video-flexible,
.video-flexible > img,
.video-play-button,
.video-corner-piece,
.video-youtube-wrapper,
.video-youtube {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

.video-container {
    background-color: rgb(0, 0, 0); /* Remove if not needed. */
    border: .7em solid rgb(0, 0, 0); /* Remove if not needed. */
    display: block;
    float: left;
    position: relative;
    width: 100%; 
}

.video-flexible {
    display: block;
    height: auto;
    margin: 0 auto;
    position: relative;
    width: 100%;
 }

.video-flexible > img {
  height: auto;
  width: 100%;
}

.video-youtube {
  background-color:#000;
  display:none;
  height: 100%;
  width: 100%;
}

.video-youtube-wrapper {
    background-color:#000;
    height:auto; 
    width:100%;
}

/*==============================================
    play button
===============================================*/

.video-play-button {
  background-color:rgb(255, 255, 255); /* IE8 Fallback */
  background-color:rgba(255, 255, 255, .7);
  -webkit-border-radius: 2.4em;
  -moz-border-radius:    2.4em;
  border-radius:         2.4em;
  cursor: pointer;
  display:block;
  height:4.8em;
  left:43%;
  margin:0 auto;
  position:absolute;
  top:37%;
  width:4.8em;
  z-index: 2;
}

.video-play-button:before {
  content:"";
  background-color:rgb(0, 0, 0); /* IE8 Fallback */
  background-color:rgba(0, 0, 0, .7);
  -webkit-border-radius: 2em;
  -moz-border-radius:    2em;
  border-radius:         2em;
  height:4em;
  left:.4em;
  position:absolute;
  top:.4em;
  width:4em;
  z-index: 1;
}

.video-play-button:after {
  content:"";
  border-bottom: .6em solid transparent;
  border-left: 1.1em solid rgb(255, 255, 255);
  border-right: 0 solid transparent; /* Firefox hack for smoother triangles */
  border-top: .6em solid transparent;
  border-style: dotted solid solid;
  border-style: solid\9; /* Hide Firefox hack from IE9 and below. */
  height: 0; 
 ...

JavaScript

(function($) {
$('.video-container').on('click', '.video-play-button', function() {
    
    var $hideImg = $(this).closest('.video-container');
    $hideImg
    .find('.video-flexible > img, .video-play-button, .video-corner-piece').hide().end()
    .find('iframe').attr('src', function() {
        return $(this).data('src');
    }).end()
    .bind('.video-youtube-wrapper').fitVids()
    .find('.video-youtube').delay(100).show();
 });
})(jQuery);

/*!
* FitVids 1.0.3 Copyright 2013, 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/
*/
(function(a){a.fn.fitVids=function(b){var c={customSelector:null};if(!document.getElementById("fit-vids-style")){var f=document.createElement("div"),d=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0],e="&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>";f.className="fit-vids-style";f.id="fit-vids-style";f.style.display="none";f.innerHTML=e;d.parentNode.insertBefore(f,d)}if(b){a.extend(c,b)}return this.each(function(){var g=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com'][src*='video.html']","object","embed"];if(c.customSelector){g.push(c.customSelector)}var h=a(this).find(g.join(","));h=h.not("object object");h.each(function(){var m=a(this);if(this.tagName.toLowerCase()==="embed"&&m.parent("object").length||m.parent(".fluid-width-video-wrapper").length){return}var...