Multiple Youtube Chromeless Players on a Single Page

Question

I'm trying to embed multiple youtube videos in a single web page using the chromeless player. This isn't multiple videos in the same player, this is multiple players on a single page.

Here is an example. (only the last video shows up):

<div>
  <div id="ytapiplayer">
    You need Flash player 9+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;version=3&amp;playerapiid=1234","ytapiplayer", "499", "281", "9", null, null, params, atts);
    function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      ytplayer.cueVideoById("Zhawgd0REhA");
    }

  </script>
</div>
<div>
  <div id="ytapiplayer2">
    You need Flash player 9+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer2" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;version=3&amp;playerapiid=4321","ytapiplayer2", "499", "281", "9", null, null, params, atts);
    function onYouTubePlayerReady(playerId) {
      ytplayer2 = document.getElementById("myytplayer2");
      ytplayer2.cueVideoById("qkAn_qJdgBs");
    }

  </script>
</div>

Any help would be greatly appreciated.

Answer 1

fixed:

var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player1","ytapiplayer", "499", "281", "9", null, null, params, atts); function onYouTubePlayerReady(playerId) { if(playerId == "player1"){ ytplayer = document.getElementById("myytplayer"); ytplayer.cueVideoById("H9v3eky91no"); }else{ if(playerId == "player2"){ ytplayer2 = document.getElementById("myytplayer2"); ytplayer2.cueVideoById("EGnwL0ganu0"); } } }

You need Flash player 9+ and JavaScript enabled to view this video. var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer2" }; swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=player2","ytapiplayer2", "499", "281", "9", null, null, params, atts);

Answer 2

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;
<div>
  <div id="ytapiplayer">
    You need Flash player 9+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;version=3&amp;playerapiid=player1","ytapiplayer", "499", "281", "9", null, null, params, atts);
    function onYouTubePlayerReady(playerId) {
        if(playerId == "player1"){
      ytplayer = document.getElementById("myytplayer");
      ytplayer.cueVideoById("H9v3eky91no");
        }else{
            if(playerId == "player2"){
          ytplayer2 = document.getElementById("myytplayer2");
          ytplayer2.cueVideoById("EGnwL0ganu0");
            }
    }
    }

  </script>
</div>
<div>
  <div id="ytapiplayer2">
    You need Flash player 9+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer2" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;version=3&amp;playerapiid=player2","ytapiplayer2", "499", "281", "9", null, null, params, atts);
  </script>
</div>