Force Youtube embedded in HD (2016 edition)

Question

OK, this has been asked many times before, but Youtube seems to make a difference in a day. I can't find a way to get Youtube embed to start playing the HD source from the beginning. Switching to HD always happens after 5-10 seconds.

Methods that do not work (more):

• Adding &hd=1 parameter to iframe src
• Adding &vd=hd720 or &vd=hd1080 to iframe src. Described here: Forcing youtube to run in 720p
• Resize the iframe to width="1280" heigh="720" in the html embed code, and then use CSS to scale the iframe back / up to the parent div. Described here: http://thenewcode.com/717/Force-Embedded-YouTube-Videos-To-Play-In-HD and here: How to get youtube to play HD video

The only possible way is to use the Youtube JavaScript interface 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, as the video will be embedded through the wordpress oembed function.

Is it possible to run the function player.setPlaybackQuality('hd1080'); for easy embedding iframe?

Answer 1

You can also set playerVars

  vq: 'hd1080', 

144p: & vq = tiny

240p: & vq = small

360p: & vq = medium

480p: & vq = large

720p: & vq = hd720

1080p: & vq = hd1080

Answer 2

From what I understand, there seems to be a VQ parameter that you can attach to the end of the inline iframe and set the value to hd720 or hd1080 as the value. After some research, it seems that YouTube once proposed the “VQ” option, and then removed it, and at the time of writing this letter again! In short, your insert 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 checked this briefly on the page and it seems to be working (for now). Hope this helps!