In a previous article I demonstrated how to make videos sourced from YouTube and Vimeo responsive. While Vimeo has good support for HD video, YouTube has not extended support for its vast catalogue of 720p, 1080p and higher resolution content to embedding on sites... at least not in any official documentation. However there is a method to achieve HD YouTube content on pages and keep the video responsive. For this example, I’ll use an edit of PureEducation’s The Detailed Universe.

First, copy the embed code by right-clicking on the YouTube video. This will provide the embed code for the SD version of the video. That’s fine – go ahead and paste that HTML into your page:

<iframe width="640" height="360" src="//youtube.com/embed/HiN6Ag5-DrU" frameborder="0" allowfullscreen></iframe>

(Note that I’ve simplified the URL for the sake of clarity, on the assumption that I will be viewing the HTML from a server. Leaving your embed code unchanged is fine.)

If the video is available in HD, we need to provide enough space for it. This will usually be a case of doubling the provided height and width dimensions. (For 1080, the dimensions would be tripled.) Our code becomes:

<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU" frameborder="0" allowfullscreen></iframe>

Even though we will be altering the dimensions of the video with CSS, you must keep these width and height attributes in place: YouTube will look for them as an indicator as to what resolution it should stream. Removing the attributes will drop the video back to SD quality.

Add a VQ variable to the end of the URL with an appropriate value:

<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU?VQ=HD720" frameborder="0" allowfullscreen></iframe>

VQ stands for Video Quality; HD720 is our target resolution. (You would use the value HD1080 for full-def video). If the URL already has variables in it, you’ll need to use & as a separator when adding the variable on the end:

?feature=player_detailpage&VQ=HD720

Now we need to surround the video with a container element. I’ll use a div:

<div class="responsive-container">
	<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU?VQ=HD720" frameborder="0" allowfullscreen></iframe>
</div>

Finally, we need to make both the container and the video within it responsive. This is the tricky part, as YouTube will immediately drop the quality of the video stream if it believes for a moment that the video is in a smaller space than it should occupy. Our code is:

.responsive-container {
	position: relative;
	padding-bottom: 53.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.responsive-container,
	.responsive-container iframe {
	max-width: 1280px;
	max-height: 720px;
}
.responsive-container iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

That’s it: try playing back the video on the page. When you do so, note that Google is doing something particularly clever: YouTube is making the video stream itself responsive. If you decrease the size of the browser window and reload the page, YouTube will deliver the version of the video that fits inside the available space. For that reason, I can’t show the video at full resolution in this article, which is limited to 800 pixels wide. As an alternative, I’ve made this demo page available. Interestingly, Firefox (at least in version 23 on Mac) will actually renegotiate with the YouTube servers to stream different sizes of the video as the window is resized.

So, bottom line:

• if the browser window or a wrapping element starts small, YouTube will stream at SD resolution, but the video will remain responsive through size changes using this technique. Outside of Firefox, the quality of the stream will not be upgraded if the window is made larger from a small state. For most browsers this is reasonable, as YouTube is assuming that the window size is the device size, and streams the most appropriate version.
• If the browser window starts large enough to show the HD version of the video, that stream will continue to display through all subsequent size changes to the window without interruption. Again, Firefox is the exception: it will reconnect and stream a lower resolution version if the window size descends past the HD width of the video.

Note that this code does not guarantee HD video quality for every visitor: YouTube can and will lower the video quality if it detects that the user’s bandwidth cannot support an HD stream. (You can test this yourself by throttling Chrome in the Developer Tools).

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.