YouTube iframe embed not starting in HD

42
votes

I'm trying to embed an HD YouTube video but no matter what I try, it only ever seems to load the 480p version.

According to YouTube, embedding an HD video is as simple as adding hd=1 to the URL:

<iframe src="//www.youtube.com/embed/{videoId}?hd=1" width="960" height="720"  frameborder="0" allowfullscreen></iframe>

This, however, does not seem to be working, at least in my implementation of the iframe:

<iframe id="video-player" width="960" height="720" src="//www.youtube.com/embed/{videoId}?enablejsapi=1&autoplay=1&rel=0&modestbranding=1&showinfo=0&showsearch=0" frameborder="0" allowfullscreen></iframe>

The same is true with the Javascript API:

HTML:

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

JS:

    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('video-player', {
            height: '720',
            width: '960',
            videoId: '{videoId}',
            playerVars: {
                'controls': 1,
                'autoplay': 1,
                'hd': 1
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        player.playVideo();
    }
8
iframeyoutubeembedyoutube-api

8 Answers

85
votes

Use this parameter:

vq=hd1080

Example:

<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
27
votes

As per this answer on the YouTube support forum:

[The iframe embed] will attempt to "optimize" the experience and will work off of the dimensions of the embed player to choose what quality to play it back at by default.

If the embed is much smaller than 1280x750, such as 853x510 or 640x390, it will play 480p or 360p, regardless of whether the &hd=1 parameter is set.

(Emphasis mine)

I changed the dimensions of the iframe to 1280x720 and the video loaded at 720p resolution.

So, basically the iframe embed mechanism is intelligent and only loads the closest resolution according to the size of the iframe.

7
votes

There is a trick you can do. Set the quality via JS. Its not guaranteed, but works on my site (ggreplayz.com):

https://developers.google.com/youtube/js_api_reference#Playback_quality

Example:

<iframe id="vid2" style="z-index: 1;" width="853" height="505" src="http://www.youtube.com/embed/<?php echo $vid2Array[0];?>?enablejsapi=1&wmode=transparent&hd=1" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
...
    function onYouTubePlayerAPIReady() {    
      player1 = new YT.Player('vid1', {
        events: {
          'onReady': onPlayerReady1
        }
      });
...
    function onPlayerReady1(event) { 
        player1.setPlaybackQuality('hd720');
    }
...
2
votes

I use &hd=1&vq=hd720 for achieve that. It loads the 720p version even if the player is smaller. I got this information from this source.

1
votes

I might be a little late, but I just discovered it only looks at the height of the video player.

When I try to embed a video 1000px wide, but only 408 pixels high (2.35:1 matte) it selects 360p >:|

1
votes

After spending more than 5hrs searching and testing all the answers, the below code works for me. Using Xcode 5, iOS 7.0.4 and iPad mini2.

- (void)viewWillAppear:(BOOL)animated
{


NSString *htmlString = @"<html><head>\
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = yes, height = 640px, width = 360px\"/></head>\
<body style=\"background:#000;margin-top:0px;margin-left:0px\">\
<iframe id=\"ytplayer\" type=\"text/html\" width=\"640px\" height=\"360px\"\
src=\"http://www.youtube.com/embed/%@?vq=hd1080\"\
frameborder=\"0\"/>\
</body></html>";

htmlString = [NSString stringWithFormat:htmlString,self.videoId, self.videoId];
[self.videoPlayerView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.youtube.com"]];

}

The only important thing here is the aspect ratio that you set in your iframe (" width=\"640px\" height=\"360px\"), which are basically the ratios of 1280*720. And then set the same size for your UIWebView. Hope this help someone.

0
votes

Mine wasn't working at all. I tried everything including all these parameters

&hd=1&vq=hd720&quality=high

But it didn't work until I added this parameter:

&version=3