CODEWITHSUNDEEP
javascripthtmlcssiframe
Stranger B.
Stranger B.

Reputation: 9374

How to make an iframe responsive full height and full width

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

Upvotes: 3

Views: 30329

Answers (2)

4dgaurav
4dgaurav

Reputation: 11496

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%;
}

Upvotes: 2

SW4
SW4

Reputation: 71230

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>

Upvotes: 12

Related Questions