CODEWITHSUNDEEP
iframeyoutubeembedyoutube-api
Chad Levy
Chad Levy

Reputation: 10140

YouTube iframe embed not starting in HD

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

Upvotes: 42

Views: 97621

Answers (8)

supersan
supersan

Reputation: 6141

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

Upvotes: 0

Siavash Alp
Siavash Alp

Reputation: 1452

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.

Upvotes: 1

Patartics Mil&#225;n
Patartics Mil&#225;n

Reputation: 4938

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.

Upvotes: 2

luissquall
luissquall

Reputation: 1880

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

Upvotes: 5

Benny Code
Benny Code

Reputation: 54812

Use this parameter:

vq=hd1080

Example:

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

Upvotes: 85

rynop
rynop

Reputation: 53559

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');
    }
...

Upvotes: 7

Julian
Julian

Reputation: 11

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

Upvotes: 1

Chad Levy
Chad Levy

Reputation: 10140

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.

Upvotes: 27

Related Questions