How to correctly embed a YouTube video in a Responsive Template using CSS

Learn the best way to implement responsive design into your embeded YouTube videos. Most you can solve with a simple addition to the CSS code.

Steven Johnson
by | Posted: August 13, 2012 | Updated: July 19, 2013
Blog Post Image 734px Wide

Before mobile devices, tablets and a whole slew of screen sizes it was pretty straight forward to embed a youtube video.  You selected the video size from the Youtube page, copied the embed code and added it your site.  Very easy.

Now in the world of responsive templates it becomes a little more involved to embed a video. If you specify a 600px wide iframe then the video will look good on a desktop and widescreen display but will most likely be two wide for the mobile devices.  Luckily for us there are several tricks to solve this issue. In this article we decided to explian it using css


1. Most videos will come witht he following code

 

<iframe width="560" height="315" src="http://youtube.com/embed/YVx3CoxeLpc?rel=0" frameborder="0" allowfullscreen></iframe>

 


2. Let's stripp that code back and remove the dimensions so it looks like this:

 

<iframe src="http://youtube.com/embed/YVx3CoxeLpc?rel=0" frameborder="0" allowfullscreen></iframe>

 


3. Now wrap a div around the iframe so it looks like the following:

 

<div class="responsive-video-container"><iframe src="http://youtube.com/embed/YVx3CoxeLpc?rel=0" frameborder="0" allowfullscreen></iframe></div>

 


4. Add the following css to your style sheet to target the above and whola, you have a fluid responsive embeded video!

 

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

 

 

Steven Johnson

Steven is a Joomla web developer and worked with Joomla since the Mambo days. He has built websites for startup businesses all the way to for Fortune 500 companies. A graduate of Georgia Tech in Chemical Engineering, he now happily spends his time building websites and reviewing all types of technology.

×

Get Hosting Coupons & the Best Joomla Guides and Resources

Sign Up for our newsletter and get access to Exclusive Hosting Deals, as well as montly Joomla tips, tricks & resources.