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="/" frameborder="0" allowfullscreen></iframe>
2. Let's stripp that code back and remove the dimensions so it looks like this:
<iframe src="/" 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="/" 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%; }
