Responsive Youtube iframe Embed

Bypass the intrinsic, static height/width attributes needed to display the iframe to allow for responsive resize. Also includes a responsive overlay that bypasses the wmode issues and disables the click to play/pause.

by Ali Khaled

HTML

<div class="vidwrap">
    <iframe width="560" height="315" src="//www.youtube.com/embed/ps4zOjaA2ME?controls=0&autoplay=1&loop=1&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
    <div class="vidoverlay"></div>
</div>

CSS

.vidwrap {
    position: relative;
    padding-top:0; /* Add in 30px for Youtube chrome */
    padding-bottom: 0%; /* Changes to match aspect ratio of iframe, see jquery */
    height: 0;
    overflow: hidden;
}
.vidwrap iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vidoverlay {
    position:absolute;
    top:0;
    left:0;
    padding-bottom: 0%; /* Changes to match aspect ratio of iframe, see jquery */
    width:100%;
    background:black; /* Change overlay color */
    opacity:0; /* Change overlay opacity */
}

JavaScript

var vidWidth = $('.vidwrap iframe').attr('width'),
    vidHeight = $('.vidwrap iframe').attr('height'),
    decimal = (((vidHeight/vidWidth).toFixed(4))*100).toFixed(2),
    percent = decimal + '%';
$('.vidwrap').css({paddingBottom:percent});
$('.vidoverlay').css({paddingBottom:percent});