javascript - Multiple iframe embeds with youtube api -


my coding knowledge self-taught , limited.

i have forum have set replace youtube urls in posts iframe embeds of video. 1 unique aspect was forcing embeds play @ 720p quality (if available) if player smaller youtube recommends. "why" long story want keep doing way. i'm trying same thing working new api.

in sample code below can working 1 video on page not both on same page. imagine has duplicate functions or along 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>

because code loading library twice, second load overrides functions you're defining in first , hence events first 1 never handled. try combining player creation single method ... (so players both embeds 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>


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more