javascript - YouTube API: Multiple Embeds on the Same Page? -

javascript - YouTube API: Multiple Embeds on the Same Page? -

how can embed different youtube videos @ different places on page using youtube api? (this means can not share same <div> "player".) start @ different times based on different onclick events. code works fine when 1 video on page, life of me cannot figure out code allow work 2 or more!

at first trying add together multiple instances of code wanted each 1 be, wasn't working. read players need added 1 <script>, tried this:

(also, matter on page <script> , <div>s are? can <script> write <div> no matter on page?)

anyway, here's code i'm using:

// within other containers with relative , absolute positioning // fadein , fadeout using jquery <div id="video1"></div> // within other containers with relative , absolute positioning // fadein , fadeout using jquery <div id="video2"></div> <script> var tag = document.createelement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); var player1; var player2; function onyoutubeiframeapiready() { player1 = new yt.player('video1',{ width: '320', height: '216', videoid: 'video_id_1', playervars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 }, events: { 'onstatechange': onplayerstatechange1 } });; player2 = new yt.player('video2',{ width: '320', height: '216', videoid: 'video_id_2', playervars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 }, events: { 'onstatechange': onplayerstatechange2 } });; } function startvideo1() { player1.playvideo(); $('#video_box_b1').delay(1000).fadein(); $("#video_box_b1").delay(20000).hide(); }; function onplayerstatechange1(event) { if(event.data === 2) { $("#video_box_b1").hide(); } } function startvideo2() { player2.playvideo(); $('#video_box_e5').delay(1000).fadein(); $("#video_box_e5").delay(20000).hide(); }; function onplayerstatechange2(event) { if(event.data === 2) { $("#video_box_e5").hide(); } } </script> // onclick triggers @ various places on page <img src="image_1.jpg" onclick="startvideo1()" /> <img src="image_2.jpg" onclick="startvideo2()" />

is there can tell i'm doing wrong? btw, containers fading in , out works if i'm using still image, text-only, or 1 video on page, it's not fading containers causing this. it's got youtube script. can help?

seems working in jsbin:

http://jsbin.com/catuhimo/3/edit

what browser trying out in? if you're using safari bleeding border version 8.0 (10538.39.41) on yosemite, jsfiddle , jsbin had problem rendering things. tried out code on chrome latest , replaced placeholders actual video ids , worked.

does help? missing point of question? based on asked, seems work ok me.

javascript jquery html youtube-api