I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds.
Currently, my setup involves utilizing the Skeleton CSS Boilerplate and a nested div structure as shown below:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
The issue arises when the iframes extend beyond the right edge of the containing div (with the class .six.columns). In an attempt to address this, I experimented with two different CSS strategies outlined below.
Despite these attempts, the iframes ended up expanding significantly in size, seemingly inheriting the width of either the .container or .row div rather than their 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%;
}
All I need is for the iframes to responsively fit snugly inside the .six.columns div. How can I achieve this?