YouTube iFrame API “setPlaybackQuality” or “suggestedQuality” not working

Question

I\'m having some trouble setting the quality settings on a video via the Youtube iFrame API. This is my code:

var player;

player = new YT.Player(\'player\',         


        

Answer 1

Problem is YouTube selects the most appropriate playback quality, so it overrides setPlaybackQuality() in the onPlayerReady() function.

I've found a solution to force YouTube's player to play in any quality you desire no matter the width and height of the player:

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '180',
        width: '320',
        videoId: 'M7lc1UVf-VE',
        events: {
        'onReady': onPlayerReady,
        'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
        'onStateChange': onPlayerStateChange
        }
    });
}


function onPlayerReady(event) {
    event.target.playVideo();
}

function onPlayerPlaybackQualityChange(event) {
    var playbackQuality = event.target.getPlaybackQuality();
    var suggestedQuality = 'hd720';

    console.log("Quality changed to: " + playbackQuality );

    if( playbackQuality !== 'hd720') {
        console.log("Setting quality to " + suggestedQuality );
        event.target.setPlaybackQuality( suggestedQuality );
    }
}

The code ensures the quality change is the suggested.

Keep in mind: the user couldn't change the video quality with the player button with that code.

Anyway, you could force the suggested quality just once.

Tested in GChrome, Firefox, and Safari.