HTML/CSS - Iframe fit screen

Question

I use the code below in order to display a youtube video. I set its size at 560 width and 315 height. Code works good but when I try to resize the window, the iframe/video doesn't resize but instead scrollbars appear. How can I make the iframe also resize so it always fits the width of the screen?

<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</body>

Possible duplicate of [Full-screen iframe with a height of 100%](https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100) — Agnel Vishal, Jun 13 '18 at 10:47

score 2 · Answer 1 · answered Jul 04 '17 at 18:48

the given width and heights are fixed sizes. if you give them in percentage like 70%,80% it should resize with the window

 <body>
        <iframe width="100%" height="500px" src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </body>

RïshïKêsh Kümar · Accepted Answer · 2017-07-04T19:06:03.477

Responsive With Device iframe

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<body>

<div class="container">
<iframe src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&amp;showinfo=0" 
frameborder="0" allowfullscreen  scrolling="auto" class="video"></iframe>
</div>

</body>

HTML/CSS - Iframe fit screen

2 Answers2