42

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();
    }
Improve this question

8 Answers 8

Reset to default
85

Use this parameter:

vq=hd1080

Example:

<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
Improve this answer
3
  • 4
    To those wondering, this is still working over a year later, despite the parameter not appearing in either Google's supported list or deprecated list.
    – marked-down
    Dec 26, 2013 at 20:20
  • Unfortunately YouTube dropped the support for 1080p videos in October 2013. You can only get up to 720p now: googlesystem.blogspot.de/2013/10/…
    – Benny Code
    May 22, 2014 at 9:44
  • Can't get this to autoplay in 1080p. Embedded dimensions are 940x529
    – User
    Aug 18, 2014 at 14:54
27

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.

Improve this answer
4
  • 43
    Adding vq=hd720 to the URL will do the trick, even when your iframe's dimensions are smaller. The downscaled version of the 720p stream looks often nicer then the native 360p or 480p version, plus the audio is also better.
    – Ruben Verborgh
    Jul 28, 2012 at 17:33
  • 1
    @RubenVerborgh, does this still work? Doesn't seem to force when I try it now. Are you using /embed or /v?
    – annie
    Sep 20, 2012 at 4:43
  • 1
    @MarcoMarsala: Did you ever find a solution for this on iPad?
    – 4thSpace
    Mar 7, 2014 at 18:15
  • Use &vq=1080 AND also the iframe size in pixel, set via CSS or width/height should be 1080... Otherwise iPad will not load the HD version (but computer does). See an example on the site I'm developing: metro-5.com videos will play at Full HD quality on computers (because I used vq=1080) but at poor quality in native Apple video player (because the frame height is only 320 and Apple ignores vq param by design), but you can change at runtime from the UI. They would play at better quality from the beginning if I set the iframe at higher height.
    – Marco Marsala
    Mar 8, 2014 at 9:52
7

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');
    }
...
Improve this answer
2
5

hd parameter has been deprecated: https://developers.google.com/youtube/player_parameters#Deprecated_Parameters

Improve this answer
2

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.

Improve this answer
1

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 >:|

Improve this answer
1
  • 1
    That makes sense since the resolution of the video is measured in height. 1280x720 is 720p and 1920x1080 is 1080p. Curiously, the next generation of HD is 4k, but that number is derived from its horizontal resolution.
    – Chad Levy
    Mar 12, 2012 at 19:59
1

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.

Improve this answer
0

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
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.