Responsive Websites: Making Video and other iFrame Embeds Responsive

Since video and other embeds using iframes are always coded with iframe height and width properties, this causes problems on responsive websites. Here’s one method to make your video embeds from YouTube, Vimeo and any other iframe based embeds respond along with your website to user’s different screen sizes. This method can be used for any other iframe embeds as well (slide shares, documents, etc…)

First you will need to add the following code to your responsive CSS style sheet include:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Then you’ll need to add an HTML div wrapper to your iframe embed code like so:

<div class="video-container">
<iframe src="http://www.youtube.com/embed/ZzzzDftrXfgy" frameborder="0" width="560" height="315"></iframe>
</div>

Pretty easy stuff.

Source code found at Responsive YouTube Embed

Comments are closed.