I'm embedding a youtube/dailymotion videos and I want to make the iframe responsive and especially full height , the same height as the window :

I made a responsive Iframe but not full height !

Here is my code

   <div  class="video-container">
                       <iframe height="100%" width="100%"  src="" frameborder="0" allowfullscreen></iframe> 
                </div>

CSS :

.video-container {
    position: relative;
    padding-bottom: 100%;
    height:100%;

}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin:0px;
}

DEMO + CODE JS FIDDLE

I'm embedding a youtube/dailymotion videos and I want to make the iframe responsive and especially full height , the same height as the window :

I made a responsive Iframe but not full height !

Here is my code

   <div  class="video-container">
                       <iframe height="100%" width="100%"  src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" allowfullscreen></iframe> 
                </div>

CSS :

.video-container {
    position: relative;
    padding-bottom: 100%;
    height:100%;

}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin:0px;
}

DEMO + CODE JS FIDDLE

• javascript
• html
• css
• iframe

2 Answers 2

Use viewport percentage lengths, vw and vh to set the height and width of the iframe. Optionally, use calc to subtract 4px as the player seems to add this.

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).

body {
  margin: 0;
}
iframe {
  height:calc(100vh - 4px);
  width:calc(100vw - 4px);
  box-sizing: border-box;
}

<iframe src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" allowfullscreen></iframe>

Demo

HTML

<div class="video-container">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9" />
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height:100%;
margin:0;
}

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