The 100% Guaranteed Method To Get YouTube iFrame Embeds Playing in HD by Default

April 10th, 2015 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

We were recently working on a site where we needed to display a full screen video embedded from YouTube using an iFrame. Now, normally when embedding a video on a site, we’d visit the video on YouTube, click ‘Share‘, and grab the embed code. That normally looks something like so:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/E37YNMYlKvo" frameborder="0" allowfullscreen></iframe>

In this scenario this worked, but when we played the video however it was automatically playing at 480p. Being a full screen video we needed the quality to be the highest (1080p was the highest for this video).

We needed a way to change the default quality….

Conflicting Answers…

A quick search revealed many people in the same situation. The majority of answers stated that you can simply append a parameter such as ‘?vq=hd1080‘ onto the end of the embedded URL like so:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/E37YNMYlKvo?vq=hd1080" frameborder="0" allowfullscreen></iframe>

No matter what I tried this just didn’t work, nor did it for many other people by the looks of it. What’s odd is that there is no mention of this ‘vq‘ parameter anywhere in the documentation.

I’d seen in various posts that YouTube would serve the most appropriate quality based on the size of the iFrame. I’m not sure this is true however as in our case of displaying a full screen video, the quality automatically served was appalling.

The solution is fortunately an easy one, and is one that is guaranteed to allow you to play the video in whatever quality you want…

The Solution

YouTube have a JavaScript API available that allows you to control videos played through iFrames. Stopping videos, pausing videos and seeking to a particular second is all possible. Most importantly, one of the options available through the API is the ability to set the quality.

So let’s see what this look like in practice:

The HTML:

<div id="player"></div>

This is the div where the iFrame will be created at runtime.

The JavaScript:

// 1. This code loads the IFrame Player API code asynchronously.
 var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '1280',
        width: '720',
        videoId: 'E37YNMYlKvo',
        events: {
            'onReady': onPlayerReady
        }
    });
}

// 3. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    player.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)
    event.target.playVideo(); // Optional. Means video autoplays
}

Once the above has ran, the video will play at the required quality.

This entry was posted on Friday, April 10th, 2015 at 3:15 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (4)
  1. green says:

    Works! Thanking

  2. Frank says:

    Thanks a lot. I’ve been looking a long time for this solution!

  3. Fredd HMV says:

    Its works ! Thank you for usefull tutorial. Already boorkmark it. :good:

  4. geo says:

    Thank you. Hd value works!