As the web moves to mobile friendly design, the responsive design aspect has taken control. There are many solutions for responsive design, but one that has been a bit cryptic has been responsive videos. Now there are multiple solutions for responsive embed codes and even online services that do all the work for you!

The typical embed code provided from Video Sharing sites like YouTube and Vimeo give you plenty of embed code options, but there is still one big one missing... responsive. In this blog post we will go over some simple solutions for responsive video codes.

HTML and CSS Solution

Our first example is to wrap the video embed code with a DIV class and add some extra CSS to make the iframe responsive.

HTML

<div class="videoWrapper">
<i-frame width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

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

Bootstrap Solution

The second example uses Bootstrap 3.2's embed code. This example requires Bootstrap 3, the only issue with this and Joomla is that Joomla has Bootstrap 2 at it's core. The Bootstrap 3 solution is very easy, simply add the bootstrap class and frameborder="0"!

Responsive 16:9 YouTube

<div class="embed-responsive embed-responsive-16by9">
<i-frame class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>

Responsive 4:3 YouTube

 <div class="embed-responsive embed-responsive-4by3">
<i-frame class="embed-responsive-item" src="//www.youtube.com/embed/TQl_Sv3LztQ"></iframe>
</div>

Responsive 16:9 Vimeo

<div class="embed-responsive embed-responsive-16by9">
<i-frame src="//player.vimeo.com/video/22428395"></iframe>
</div>

Online Services Solution

Our final example is the simplest of them all. Let embedresponsively.com do the work for you. Embedresponsively.com uses the same method as our CSS and HTML solution and now services multiple embed services like YouTube, Vimeo, GoogleMaps, and more. Simply add the link to the site and Embedresponsively.com will give you the inline mark up for a perfect responsive embed code!

<s-tyle>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
 .embed-container iframe, 
.embed-container object, 
.embed-container embed 
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'><i-frame src='https://www.youtube.com/embed/x76VEPXYaI0' frameborder='0' allowfullscreen></iframe></div>