iframe refusing to be responsive inside container div

Question

I'm trying to make iframe responsive inside div, there are plenty of resources on the web on how to do this, but the common solution is not working for my case for YouTube video embeds.

I'm using Skeleton CSS Boilerplate. I have a nested div structure like so:

<div class="container">
    <div class="row item">
        <div class="six columns">
            <iframe> </iframe>
        </div>
        <div class="six columns">
            <iframe> </iframe>
        </div>
    </div>
</div>

The iframe were protruding outside the right edge of the containing div (class .six.columns) so I tried the following two css strategies (below).

However, with each of these strategies, <iframe> have become huge, and seem to have taken on the width of the .container div (or perhaps the .row div), instead of the immediate parent, the .six.columns div.

div > iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

and

div.six.columns iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

I just want the <iframe> to responsively fit inside the .six.columns div. How can I achieve this?

Answer 1

Set the container to position:relative in order to have the absolute to work.

To maintain the video aspect ratio, wrap the iframe into another div, and use the padding trick. Let's say the video is 16:9, the padding-bottom value would be 9/16=56.25%. Simple demo follows.

https://jsfiddle.net/dfkhkLhp/

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

<div class="youtube">
    <iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>