YouTube iframe embed not starting in HD

Question

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();     } 

Answer 1

Use this parameter:

vq=hd1080

Example:

<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>