Making videos responsive

Follow

Videos hosted in iframes (such as Youtube videos) often aren't responsive. This can cause some strange looking issues depending on the size of the browser. Luckily, it is easy to take these videos and make them responsive.

Here is an example of some embed code taken from a youtube video. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/hbsIdpn6yCM" frameborder="0" allowfullscreen></iframe> 

You could copy/paste this into the HTML of a page, and it would display a Youtube video. However, if you shrink your browser horizontally, notice how the video can cause a horizontal scroll bar, and expand beyond the sides of the page.

 

To make this responsive, first we will want to take the embed code, and put a div wrapper around the it. 

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

We will be using this video div box to turn this video responsive. After this, we need to apply some CSS to both the div box and the iframe.

.video-embed {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-embed iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


Now behold the results!



And that is it! Applying these small tweaks will make any video resize dynamically. This will lead to a much more professional, clean looking website!

Have more questions? Submit a request

Comments