Responsive iframe

Small snippet for a responsive iframe solution with fixed aspect-ratio.

by Andy Blueman

HTML

<div id="wrapper" class="wrapper">
    <div id="h_iframe" class="h_iframe">
        <!-- a transparent image is preferable -->
        <img id="placehold" class="ratio" src="http://placehold.it/9x16" />
        <iframe id="testiframe" src="www.jsfiddle.net" frameborder="0"></iframe>
    </div>
</div>

CSS

*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    box-sizing: border-box;
    height:100%;
    width:100%;
}
.wrapper {
    border:1px solid red;
    width:100%;
    height:100%;
    margin:0 auto;
    background:#000;
    overflow:hidden;
}

.h_iframe {
    position:relative;
    width:auto;
    height:auto;
}
.h_iframe .ratio {
    display:block;
    width:100%;
    height:auto;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

JavaScript

function readyresize() {
    var bob = "0.90";
    if ($("#h_iframe").width() <= 450) {
        $('iframe#testiframe').contents().find('body').css({"background-color":red});
        alert("boom");
    } else {}

}
$(document).ready(readyresize);
$(window).resize(readyresize);