title: Mobile YouTube in High-definition
body: <p>I am trying to play a video on the YouTube mobile website (<a href="https://m.youtube.com" rel="nofollow noreferrer">https://m.youtube.com</a>) in 720p or more. So far I am failing.</p>
  
  <h2>My analysis so far</h2>
  
  <p>When accessing the mobile website, YouTube doesn't offer controls for the quality setting. I am employing JavaScript to add this functionality. My intention is to later inject that later with a browser extension.</p>
  
  <p>Here are two angles I have tried so far:</p>
  
  <p><strong>1) using <code>loadVideoById</code></strong></p>
  
  <pre><code>player = document.getElementsByClassName("_msc")[0];
  id = player.getVideoData()["video_id"];
  player.loadVideoById(id, 0, "hd720");
  
  // debug information
  player.getAvailableQualityLevels();  // --&gt; reports ["hd1080", "hd720", "large", "medium", "small", "tiny", "auto"]
  player.getPlaybackQuality();
  player.showVideoInfo();  // shows statistics below in viewport
  </code></pre>
  
  <p>However, the new player is still in quality <code>medium</code>. The script works for setting it to a smaller quality <code>small</code> and <code>tiny</code>. Often this happens when the viewport is to small. However in our case it is large enough to support a the <code>large</code> (<code>854 x 480</code>) quality setting, see on the picture below. Still switching to it doesn't work. It only loads up to <code>medium</code> (<code>640 x 360</code>).</p>
  
  <p><a href="https://i.stack.imgur.com/p8ABo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p8ABo.png" alt="enter image description here"></a></p>
  
  <p><strong>2) using <code>setPlaybackQuality</code></strong></p>
  
  <p>This is the official way of switching the quality, which works perfectly on the desktop version of the website (<a href="https://www.youtube.com" rel="nofollow noreferrer">https://www.youtube.com</a>).</p>
  
  <pre><code>player.stopVideo();
  player.setPlaybackQuality("large");
  player.seekTo(10);
  </code></pre>
  
  <p>Then calling <code>player.getPlaybackQuality()</code> still only reports <code>medium</code>. Note that this script doesn't work to set it to a smaller value <code>small</code>, <code>tiny</code>. So it doesn't seem to work at all.</p>
  
  <hr>
  
  <p>On the desktop version both versions work. However to retrieved one has to use: 
  <code>player = document.getElementById('movie_player');</code>.</p>
  
  <p>Also when testing this on the desktop, accessing the mobile site requires me to to a user agent switch to one of a mobile browser.</p>
  
  <h2>Question</h2>
  
  <p>How can I sucessfully change the quality to anything higher than <code>medium</code>?</p>