Fluid Iframe with no Javascript

Mohamed saleem

Follow

Feb 23, 2017 · 1 min read

We have a feature in the editor of our product at Fan Ads, which allows users to include YouTube videos inside the articles they write and it also allows them to position the videos left aligned or right aligned or centered.

While centering the video, i found that the YouTube Iframe did not take up the whole width of the container

This is how it goes,

<div class=”iframe-wrapper”>
    <iframe></iframe>
</div>

After trying a lot, I found a solution. It is pretty simple. The technique is to position the iframe absolute inside the relatively postioned iframe-wrapper div.

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

And, voila!