MagnificPopup + YouTube JavaScript API - Quality settings (setPlaybackQuality)

mpytjsapi.js

$(document).ready(function() {

	// This code loads the IFrame Player API code asynchronously.  
	var tag = document.createElement('script');  

	tag.src = "https://www.youtube.com/iframe_api";  
	var firstScriptTag = document.getElementsByTagName('script')[0];  
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  


	$('.classname').magnificPopup({
		delegate: 'a',
		type: 'iframe',
		closeBtnInside: true,
		tLoading: 'Loading...',
		tClose: 'Loading (Esc)',

		// Enabling Gallery if needed
		gallery: { 
			enabled: true,
			tCounter: '<span style="display:none;" class="mfp-counter">%curr% из %total%</span>',
			tPrev: 'Previous',
			tNext: 'Next',
			titleSrc: 'title',
			// arrowMarkup: '<button title="%title" type="button" class="fa fa-chevron-%dir% mfp-arrow"></button>'
		},

		iframe: {
			// iframe markup must include width and height params based on YT API reference https://goo.gl/KLD4gP
			// it os also must contain an ID selector (in this case 'player')

			markup: '<div class="mfp-iframe-scaler">'+
			'<div class="mfp-close"></div>'+
			'<iframe id="player" width="1280" height="720" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
			'</div>',

			// This is a default YT iframe pattern from MP docs http://bit.ly/2ibeUpx
			patterns: {
				youtube: {
					index: 'youtube.com/', 
					id: 'v=', 
					src: '//www.youtube.com/embed/%id%?enablejsapi=1&autoplay=1&rel=0' // set enablejsapi to 1
				},
			},

			srcAction: 'iframe_src', 
		},

		// The magic is here :)
		callbacks: { 
			open: function () {
				new YT.Player('player', {  // player - our iframe ID
					events: {
						'onReady': onPlayerReady,
						'onStateChange': onPlayerStateChange, // close popup window when video end
						// 'onPlaybackQualityChange': onPlayerPlaybackQualityChange // just check everyting works
					}
				});
			},
		}
	 });

	function onPlayerReady(event) {
		event.target.setPlaybackQuality('hd720'); // set quality eg: small, medium, large, h720, hd1080, highres, default - https://goo.gl/KLD4gP
	}

	function onPlayerStateChange(event) {
		if (event.data == YT.PlayerState.ENDED) {
			$.magnificPopup.close(); // close popup window when video end - thanks to https://gist.github.com/philbar/7357321f491dd36f1343
		}
	}

	function onPlayerPlaybackQualityChange(event) {
		console.log('quality changed'); // just check everyting works
	}
}