Loading Youtube iFrame API video at a lower quality

Question

Currently, we have a YouTube iFrame API setup with the following (pretty boilerplate) code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  var player;
  YT.ready(function() {
    player = new YT.Player('player', {
      videoId: 'iyBaInK2TsI',
      width: 200,
      height: 200,
      events: {
        onReady: "onReady",
        onStateChange: "onStateChange",
        onPlaybackQualityChange: "onPlaybackQualityChange",
        onError: "onPlayerError"
      },
      playerVars: {
        fs: 0, // hide fullscreen button by default
        playsinline: 1, // make the player not go fullscreen when playing on ios
        modestbranding: 1, // hide youtube logo by default - we say 'powered by youtube'
        controls: 0, // hide controls by default
        showinfo: 0, // hide video title by default
        iv_load_policy: 3, // hide annotations by default
        rel: 0
      }
    });

    console.log('available quality levels after create = ' + player.getAvailableQualityLevels());
  });
  // onReady, onStateChange, onPlaybackQualityChange, onPlayerError handlers...
</script>

The long and short of it is that it always loads the video at 'medium' quality. Calling setPlaybackQuality('small') does not affect the video quality whether I am on desktop or mobile.

I have tried calling setPlaybackQuality('small') in onReady, onStateChange when state becomes BUFFERING or PLAYING, and completely separately in the JavaScript console when the video is playing, un-played or paused.

This presents a large issue when users are trying to load the player on a 3G/4G connection. I understand that 3G is being phased out for video streaming but a significant amount of users still operate on 3G connections and the ability to stream at 144p actually makes video tenable on 3G and at 240p makes video tenable on 4G (non-LTE).

When I choose a video with hd720 as a quality option, I can call setPlaybackQuality('hd720') and it works fine.

My specific question is, is there anything in my configuration that would preclude switching to lower quality, and is there a certain set of commands that would work around this limitation and trigger the playback quality actually changing?

Answer 1

The workaround I found is to create the player with no videoId, never call setPlaybackQuality anywhere else, but call loadVideoById(videoId, 0, 'small') inside of your onReady handler. This was respected on both Android and iOS when tested, calling onPlaybackQualityChanged with 'small' once on Android and Desktop and twice on iOS, never forcing medium quality.

Unfortunately, if you pass 'tiny', it doesn't seem to work. On most videos, it will force 'small'; in my experience, however, it's forced 'medium' before. Be aware of that.