Responsive youtube video with iframe

Question

I have a following iframe in html and that contain youtube video. here is the iframe:

<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>

How can I make this iframe responsive?

Answer 1

You can use an intrinsic ratio. The containing element is responsive and stays at a specific aspect ratio. The iframe inside is positioned absolutely to this element.

HTML

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

More info on CSS Tricks

Answer 2

Put this in your styles.

http://jsfiddle.net/wbjkuwym/

iframe, object, embed {
        max-width: 100%;
}

Answer 3

div {
    position: relative;
    padding-bottom: 75%; /*315/420=0.75*/
    height: 0;
    overflow: hidden;
}
div iframe{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

<div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>
</div>