Responsive Youtube video iframes

_ResponsiveVideo.md

Adapted from the techniques shown in the following article.

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

ResponsiveVideo.css

.videoWrapper {
    position: relative;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

ResponsiveVideo.js

    // Find all YouTube videos
    jQuery("iframe[src*='//www.youtube.com']")
        .wrap('<div class="videoWrapper" />')
        .each(function() {

            // Figure out and save aspect ratio for each video
            jQuery(this)
                .parent()
                .css('padding-bottom', (this.height / this.width * 100)+'%');

            jQuery(this)
                // and remove the hard coded width/height
                .removeAttr('height')
                .removeAttr('width');
    });