YouTube Embed v0.2.1

by Aaron Kahlhamer

HTML

<a class="js-rye-event rye-link" href="//www.youtube.com/watch?v=PxEdcntg4LA" aria-label="Press enter to play YouTube video.">
        <img class="rye-link__poster" src="http://placehold.it/1024x640" alt="" />
        <button class="rye-link__play-button rye-link__center"></button>
    </a>

CSS

/*  youtube embed v0.2.3  */


/*==============================================
    do not style
===============================================*/

.youtube-embed,
.youtube-embed * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

.youtube-embed {
  position: relative;
  width: 100%;
}
  
  /* when using grid framework */
  .grid-wrapper .youtube-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }

  .youtube-embed__wrapper {
    height: auto;
    margin: 0 auto;
    width: 100%;
  }

  .youtube-embed__iframe {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
  }

/*==============================================
    youtube embed theme 
    style to your heart's desire
===============================================*/

/* video background and border */
.youtube-embed--theme {
  background-color: rgb(0, 0, 0);
  border: .7em solid rgb(0, 0, 0);
}

/* when using grid framework */
.grid-wrapper .youtube-embed--theme {
  background-color: transparent;
  border:none;
  margin-top:-.2em; /* for video to fit properly */
}

.rye-link {
  position: absolute;
}

  /* poster image */
  .rye-link__poster {
    height: auto;
    width: 100%;
  }

  /* play button centered vertically and horizontally */
  .rye-link__center,
  .grid-wrapper .rye-link__center {
    margin:auto;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    top:0;
  }

  /* play button */
  .rye-link__play-button,
  .grid-wrapper .rye-link__play-button {
    background-color:rgb(60, 57, 57); /* RGBA Fallback */
    background-color:rgba(60, 57, 57, .8);
    border:.4em solid rgb(255, 255, 255); /* RGBA Fallback */
    border:.4em solid rgba(255, 255, 255, .7);
    -webkit-border-radius: 2.45em;
    -moz-border-radius:    2.45em;
    border-radius:         2.45em;
    cursor: pointer;
    display:block;
    height:4.8em;
    width:4.8em;
    z-index:...

JavaScript

(function($) {

'use strict';
 
////////////////////////////////////////////////////////
///////////////// YOUTUBE EMBED V0.2.3 /////////////////
////////////////////////////////////////////////////////

// FEATURES
// ::fluid layout
// ::styles separated from behavior
// ::works with and without the grid framework
// ::accessible with keyboard
// ::youtube autoplays on devices that allow autoplay
// ::youtube links are clickable when javascript disabled



jQuery(function($) {


    var $jsRepsonsiveYouTubeEmbedLink       = $('.js-rye-event'),
        videoHeight                         = 9,
        videoWidth                          = 16,
        aspectRatio                         = videoHeight / videoWidth,
        youtubeID,
        youtubeURL;




    function youtubeEmbed(e) {

        e.preventDefault();

        var $thisEmbed = $(this);
        
        // hide poster image and button
        $thisEmbed.hide();

        // grab youtube link
        youtubeURL = $thisEmbed.attr('href');

        // grab youtube ID from link
        youtubeID = youtubeURL.split('//www.youtube.com/watch?v=')[1];

        // show iframe
        $thisEmbed.parent().append('<div class="youtube-embed youtube-embed--theme"><div class="js-rye youtube-embed__wrapper" style="padding-top: ' + aspectRatio * 100 + '%"><iframe class="js-rye-iframe youtube-embed__iframe" type="text/html" src="http://www.youtube.com/embed/'+ youtubeID +'?autoplay=1&controls=1&modestbranding=1&rel=0&showinfo=0&html5=1&wmode=transparent"width="386" height="217" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen wmode="transparent" aria-label="YouTube video is loading."></iframe></div></div>');


        setTimeout(function() {

            $thisEmbed.parent().find('.js-rye-iframe').focus();

        }, 500);



    }


    // click to play video
    $jsRepsonsiveYouTubeEmbedLink.on('click', youtubeEmbed);



}); // end document ready


})(jQuery);