Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force Youtube embed to play in HD (2016 edition)

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?

like image 771
Fabian Sebastian Avatar asked Mar 09 '16 19:03

Fabian Sebastian


1 Answers

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

like image 88
AccentV7 Avatar answered Sep 24 '22 14:09

AccentV7