title: Force Youtube embed to play in HD (2016 edition)
body: <p>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.</p>
  
  <p>Methods that don't work (anymore):</p>
  
  <ol>
  <li>Adding <code>&amp;hd=1</code> parameter to the iframe src</li>
  <li>Adding <code>&amp;vd=hd720</code> or <code>&amp;vd=hd1080</code> parameters to the iframe src. Described here: <a href="https://stackoverflow.com/questions/7582336/force-youtube-embed-to-start-in-720p">Force youtube embed to start in 720p</a></li>
  <li>Changing the iframe dimenstions to <code>width="1280" heigh="720"</code> in the html embed code and then using CSS to scale the iframe back down/up to the parent div. Described here: <a href="http://thenewcode.com/717/Force-Embedded-YouTube-Videos-To-Play-In-HD" rel="nofollow noreferrer">http://thenewcode.com/717/Force-Embedded-YouTube-Videos-To-Play-In-HD</a> and here: <a href="https://stackoverflow.com/questions/26032397/how-to-force-youtube-to-play-hd-videos">How to force youtube to play HD videos</a></li>
  </ol>
  
  <p>The only possible way would be using the Youtube JavaScript API, as described here:
  <a href="http://biostall.com/the-100-guaranteed-method-to-get-youtube-iframe-embeds-playing-in-hd-by-default/" rel="nofollow noreferrer">http://biostall.com/the-100-guaranteed-method-to-get-youtube-iframe-embeds-playing-in-hd-by-default/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 &lt;iframe&gt; (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  
  }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="player"&gt;&lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p>But: I want to use a simple iframe embed since videos will be embeded through the wordpress oembed feature. </p>
  
  <p>Is there any way to run the <code>player.setPlaybackQuality('hd1080');</code> function for a simple iframe embed?</p>