Force Youtube embed to play in HD (2016 edition)

6
votes

OK, this has been asked many times before – but Youtube seems to change things up every other day. I can't find a way to force a Youtube embed to start playing a HD source from the beginning. The switch to HD always happens after 5-10 seconds.

Methods that don't work (anymore):

  1. Adding &hd=1 parameter to the iframe src
  2. Adding &vd=hd720 or &vd=hd1080 parameters to the iframe src. Described here: Force youtube embed to start in 720p
  3. Changing the iframe dimenstions to width="1280" heigh="720" in the html embed code and then using CSS to scale the iframe back down/up to the parent div. Described here: http://thenewcode.com/717/Force-Embedded-YouTube-Videos-To-Play-In-HD and here: How to force youtube to play HD videos

The only possible way would be using the Youtube JavaScript API, as described here: http://biostall.com/the-100-guaranteed-method-to-get-youtube-iframe-embeds-playing-in-hd-by-default/

// 1. This code loads the IFrame Player API code asynchronously.  
 var tag = document.createElement('script');  
  
tag.src = "https://www.youtube.com/iframe_api";  
var firstScriptTag = document.getElementsByTagName('script')[0];  
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  
  
// 2. This function creates an <iframe> (and YouTube player) after the API code downloads.  
var player;  
function onYouTubeIframeAPIReady() {  
    player = new YT.Player('player', {  
        height: '1280',  
        width: '720',  
        videoId: 'E37YNMYlKvo',  
        events: {  
            'onReady': onPlayerReady  
        }  
    });  
}  
  
// 3. The API will call this function when the video player is ready.  
function onPlayerReady(event) {  
    player.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)  
    event.target.playVideo(); // Optional. Means video autoplays  
}  
<div id="player"></div>

But: I want to use a simple iframe embed since videos will be embeded through the wordpress oembed feature.

Is there any way to run the player.setPlaybackQuality('hd1080'); function for a simple iframe embed?

2
javascriptiframeyoutubeembed

2 Answers

1
votes

You can also set your playerVars

            vq: 'hd1080',

144p: &vq=tiny

240p: &vq=small

360p: &vq=medium

480p: &vq=large

720p: &vq=hd720

1080p: &vq=hd1080

0
votes

From what I understand, there seems to be a 'VQ' parameter that you can attach to the end of the embed iframe and set hd720 or hd1080 as the value. After some research it seems YouTube once offered the 'VQ' parameter, then took it away, and as of this writing is back again! In short, your embed should look something like this:

<iframe src="https://www.youtube.com/embed/VIDEO_ID_HERE?vq=hd1080" frameborder="0" allowfullscreen></iframe>

Here is an article related to this that I found during my research: Found Here

I've tested this briefly on a page and it seems to work (for now). Hope this helps!