Best IT Recipes

YouTube iframe embed doesn't start with HD

I am trying to embed a YouTube HD video, but no matter what I try, it only ever downloads the 480p version.

According to YouTube, embedding HD videos 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 work, at least in my iframe implementation:

 <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 can be said for 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(); }
+42
youtube youtube-api iframe embed
Nov 08 2018-11-11T00:
source share
8 answers

Use this option:

VQ = HD1080

Example:

 <iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
+85
Sep 17 '12 at 22:18
source share

According to this answer on the YouTube support forum:

[Iframe insert] will try to “optimize” the experience and will work with the size of the built-in player to select which quality to play by default.

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

(Emphasis mine)

I resized the iframe to 1280x720 and the video uploaded with 720p resolution.

So basically the iframe embedding mechanism is smart and only loads the closest resolution according to the iframe size.

+27
Nov 08 2018-11-11T00:
source share

There is a trick you can do. Set quality through JS. Its not guaranteed, but it works on my website (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'); } ...
+7
Apr 3 2018-12-12T00:
source share

hd parameter is out of date: https://developers.google.com/youtube/player_parameters#Deprecated_Parameters

+5
Oct 19
source share

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

+2
Jan 30 '14 at 2:34
source share

I might be a little late, but I just found that he 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
Mar 09 '12 at 16:53
source share

After spending more than 5 hours searching and testing all the answers, the code below 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 basically corresponds to 1280 * 720, and then set the same size for your UIWebView Hope this helps someone.

+1
02 Feb '14 at 10:30
source share

Mina didn't work at all. I tried everything including all of these options

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

But this did not work until I added this parameter:

 &version=3
0
Sep 20 '15 at 12:46
source share


More articles:


All Articles