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.

HTML

<div class="vidwrap" style="width=100%; height=100%;">
    <iframe width="100" height="80" src="https://embed.windy.com/embed2.html?lat=57.704&lon=10.415&zoom=5&level=surface&overlay=wind&menu=&message=true&marker=true&calendar=&pressure=true&type=map&location=coordinates&detail=true&detailLat=59.779&detailLon=10.591&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0" allowfullscreen></iframe>
    <div class="vidoverlay"></div>
</div>

CSS

html,body,iframe {
height:100%;
width:100%;
}
html, body {margin:0;padding:0;}
.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 + '%';
    alert (percent);
$('.vidwrap').css({paddingBottom:percent});
$('.vidoverlay').css({paddingBottom:percent});