How to set the iframe height & width to 100%

Question

I am in need of doing the following:

1. I have a header content which is 70px and an iframe with a wrapper. The height & width of the iframe has to be set to

Answer 1

I have a video frame in proportions 6:19 from YouTube -> by calculating 9/16 - 0.5625. multiplying with 95vw (you can also set to 100vW).

Worked the best to keep video ratio the same.

@media all and (max-width: 730px) {
    iframe{
        width: 95vw !important;
        height: calc(95vw*0.56) !important;
    }
}
    iframe{
    margin:auto;
    display:block;
    width:685px;
    height:385px;
}

    <iframe id="video" allowfullscreen src="https://www.youtube.com/embed/5Mdy8nBBbQQ?autoplay=1"></iframe>

Answer 2

CSS only solution for 100% width and height and responsive

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

without position : absolute

css

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

And finally here is the crack

Modern browsers now support the:

width: calc(100% - 70px);

CSS

html,body {
    height:100%; 
    margin-top:0; 
    margin-bottom:0;
}
.h_iframe iframe {
    width:100%;
    height:calc(100% - 75px);
}
.h_iframe {
    height: 100%;
}
.element{
    width:100%;
    height:70px;
    background:red;
}

HTML

<div class="container">
    <div class="element">here it goes</div>
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Final DEMO

Answer 3

This worked for me

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>

Answer 4

You could attempt to do something like this:

  iframe {
    width: 825px;   // you define your standar width and height
    height: 464px;
    @media screen and (max-width: 1000px){ // then for your responsive you do this or only this. 
      width: calc(84vw);
      height: calc(47vw)
    }  
  }

Answer 5

vw units work ( tested on Chrome and Firefox )

iframe{
 width:100vw;
}

Answer 6

Simple and clean. jQuery is required. Source: https://stackoverflow.com/a/3940802

Modified a bit

                function iframeHeight() {
                    var newHeight = $(window).height();
                    var newWidth = $(window).width();
                    var buffer = 100;     // space required for any other elements on the page
                    var newIframeHeight = newHeight - buffer;

                    $('iframe.fop').css('height',newIframeHeight).css('width',newWidth);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
                }

                // When DOM ready
                $(function() {
                    window.onresize = iframeHeight;
                    iframeHeight();
                });

<iframe src="" target="_parent" width="100%" height="100%" class="fop"></iframe>