CODEWITHSUNDEEP
javascriptyoutube-api
krrrrak
krrrrak

Reputation: 11

Multiple iframe embeds with youtube api

My coding knowledge is mostly self-taught and limited.

I have a forum which I have set to replace youtube URLs in posts with iframe embeds of the video. The one unique aspect to it was that it was forcing the embeds to play at 720p quality (if available) even if the player was smaller than youtube recommends. The "why" is a long story but I want to keep doing it that way. I'm trying to get the same thing working with the new API.

In the sample code below I can get it working for one video on a page but not both on the same page. I imagine it has something to do with duplicate functions or something along those lines.

<html><body>

<script>

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

	var xyzplayer;
	function onYouTubeIframeAPIReady() {
	xyzplayer = new YT.Player('xyzplayer', {
		events: {
			'onStateChange': onPlayerStateChange
			}
		});
	}

	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	event.target.setPlaybackQuality('hd720');
		}
	}

    </script>

<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>

<br><br><br>

<script>

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

	var abcplayer;
	function onYouTubeIframeAPIReady() {
	abcplayer = new YT.Player('abcplayer', {
		events: {
			'onStateChange': onPlayerStateChange
			}
		});
	}

	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	event.target.setPlaybackQuality('hd720');
		}
	}

    </script>

<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>

</body></html>

Upvotes: 0

Views: 1567

Answers (1)

jlmcdonald
jlmcdonald

Reputation: 13667

Because your code is loading the library twice, the second load overrides the functions you're defining in the first and hence events from the first one will never be handled. Try combining the player creation into a single method ... something like this (so that players for both embeds get their events listened to):

<html><body>
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>
<br/><br/><br/>
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>
<script>

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

	var abcplayer,xyzplayer;
	function onYouTubeIframeAPIReady() {
	  abcplayer = new YT.Player('abcplayer', {
		events: {
		  'onStateChange': onPlayerStateChange
		}
	  });    
	  xyzplayer = new YT.Player('xyzplayer', {
		events: {
			'onStateChange': onPlayerStateChange
		}
	  });
	}

	function onPlayerStateChange(event) {
	  if (event.data == YT.PlayerState.PLAYING) {
	    event.target.setPlaybackQuality('hd720');
	  }
	}
    </script>
</body></html>

Upvotes: 2

Related Questions