How to set playback quality youtube api

Question

I have 2 youtube players on my site. Everything works fine but I cannot set playback quality. What am I doing wrong?

var playerInfoList = [{
  id: 'player',
  height: '390',
  width: '640',
  videoId: 'jU1_0T79Lew',
  playerVars: {
    'autoplay': 1,
    'autohide': 1,
    'showinfo': 0,
  },
  events: {
    'onReady': onPlayerReady
  }
}, {
  id: 'player1',
  height: '390',
  width: '640',
  videoId: 'u-OxxLMvOXg',
  playerVars: {
    'autoplay': 0,
    'autohide': 1,
    'showinfo': 0,
  }
}];

function onYouTubeIframeAPIReady() {
  if (typeof playerInfoList === 'undefined')
  return;

  for (var i = 0; i < playerInfoList.length; i++) {
    var curplayer = createPlayer(playerInfoList[i]);
  }
}

function createPlayer(playerInfo) {
  return new YT.Player(playerInfo.id, {
    height: playerInfo.height,
    width: playerInfo.width,
    videoId: playerInfo.videoId,
    playerVars: playerInfo.playerVars,
    events: playerInfo.events
  });
}


// The API will call this function when the video player is ready.
function onPlayerReady(event) {
  playerInfo.id.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)
}

Answer 1

Playback quality

player.getPlaybackQuality():String

• This function retrieves the actual video quality of the current video. Possible return values are highres, hd1080, hd720, large, medium and small. It will also return undefined if there is no current video.

player.setPlaybackQuality(suggestedQuality:String):Void

• This function sets the suggested video quality for the current video. The function causes the video to reload at its current position in the new quality. If the playback quality does change, it will only change for the video being played. Calling this function does not guarantee that the playback quality will actually change. However, if the playback quality does change, the onPlaybackQualityChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackQuality function.

When you suggest a playback quality for a video, the suggested quality will only be in effect for that video. You should select a playback quality that corresponds to the size of your video player. For example, if your page displays a 1280px by 720px video player, a hd720 quality video will actually look better than an hd1080 quality video. We recommend calling the getAvailableQualityLevels() function to determine which quality levels are available for a video

NOTE

If you call the setPlaybackQuality function with a suggestedQuality level that is not available for the video, then the quality will be set to the next lowest level that is available. For example, if you request a quality level of large, and that is unavailable, then the playback quality will be set to medium (as long as that quality level is available).

Base on this tutorial : How to Control YouTube's Video Player with JavaScript

var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
},
events: {
onReady: initialize
}
});
}

Changing Video Quality

$('#quality').on('change', function () {
player.setPlaybackQuality($(this).val());
});

Try setting your playerInfo to a global variable and follow the tutorial above to help you set up a embedded youtube video.

Hope this helps.

Answer 2

Update for 2022:

It looks like in 2019 Google removed the ability to set video quality.