Simple Responsive Video Embed

All CSS, leaves original video embed codes (iframe, object, embed) intact. Added autoplay, modest branding, removed controls, placed overlay to prevent play/pause on click.

by Pete Fecteau

HTML

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

CSS

html, body {margin:0;padding:0;}

.vidwrap {
    position: relative;
    padding-bottom: 56.21%;
    height: 0;
    overflow: hidden;
}

.vidwrap iframe,  
.vidwrap object,  
.vidwrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vidwrap .vidoverlay {
    position:absolute;
    top:0;
    left:0;
    padding-bottom: 56.21%;
    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});