Responsive iframes

This quick guide will show you how to make your embedded iframe fully responsive.

Start by wrapping your iframe in a div and assign a class.

<div class="iframe-wrap">
    <iframe class="responsive-iframe" width="560" height="315" src="https://www.youtube.com/embed/9-SQGOYOjxs" frameborder="0" allowfullscreen></iframe>
</div>

Though the iframe has a set width, you can use CSS positioning properties to force the element to adapt to the size of your wrapper, which will use percentages and remain responsive down to mobile.

.iframe-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JSFiddle

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *