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();
}
Use this parameter:
vq=hd1080
Example:
<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
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.
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');
}
...
hd
parameter has been deprecated: https://developers.google.com/youtube/player_parameters#Deprecated_Parameters
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.
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 >:|
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.
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