back to top
shopping basket

View your basket

Negative scanning service

What our customers are saying:

The service has been friendly, efficient, careful and very good value for money.

Read more...

Embed A YouTube Video On A Responsive Website

Embed A YouTube Video On A Responsive Website

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 21 May 2015

If you're building a responsive website and have videos on YouTube that you would like to include, you might hit on a bit of a problem: the YouTube embed code. Google are all about standards compliant design and encouraging designers to make their sites work on mobiles, but their own code for embedding YouTube videos is, by itself unresponsive AND not standards compliant. Left 'uncaged', it will only work on a static PC viewable site. But, this problem is not insurmountable.

This is the standard embed code for one of the videos that appears on our website:

<iframe width="560" height="315" src="https://www.youtube.com/embed/CIAb-EA1lGQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

It feels like I'm labouring a point, but include this as it is and the video will ALWAYS be 560 pixels wide and 315 pixels high. ALWAYS!!! This is not responsive. Really annoying when you've bothered to make your image sprites responsive and taken an age over making the menu responsive.

Anyway. Enough complaining. As I say, there is a fix. And this is it...

Below is the standard embed code that I have used with all the videos across the site, and below that is the div class that it is always contained in, and below that is some css to make it responsive, and below THAT I put all the html together. Right then. Let's look at those one at a time.

The New, Improved YouTube Embed Code

<iframe width="640" height="360" src="https://www.youtube.com/embed/CIAb-EA1lGQ?modestbranding=1&amp;rel=0&amp;fs=0" style="border:none"></iframe>

This does still define the size of the iframe but, with the CSS that will be included later this fact will be completely ignored. If you take out any reference to width and height, the video may still embed successfully, I don't know. But, as it is ignored, it doesn't hurt to leave it in.

modestbranding=1 removes the YouTube logo from the embedded video.

rel=0 doesn't allow any 'related' videos to be suggested once the video you've embedded has finished playing.

fs=0 keeps your viewers from making the video appear in fullscreen.

style="border:none" is the part that makes the embed code standards compliant, replacing frameborder="0".

The DIV Class

<div class="show-video">

</div>

What you call the DIV class that contains the embed code is not important: there just has to be one. It's the CSS that makes it work responsively.

The CSS to Make It Responsive

.show-video {
position: relative;
height: 0;
padding-bottom: 56.25%;
margin: 7px 0;
}

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

The magic really happens with these few lines:

height: 0;
padding-bottom: 56.25%;

... which keeps the iframe in the aspect ratio 16:9 at all times, and ...

width: 100%;
height: 100%;

... which ensures the iframe will always fill its containing DIV.

All the HTML Together In One Place

<div class="show-video">
<iframe width="640" height="360" src="https://www.youtube.com/embed/CIAb-EA1lGQ?modestbranding=1&amp;rel=0&amp;fs=0" style="border:none"></iframe>
</div>

To see a working, live example of this, why not visit our About Us page on any device? The video will always sit nicely on the screen.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more