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