Multiple Youtube Chromeless Players on a Single Page - youtube

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&version=3&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&version=3&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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<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&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");
}
}
}
</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&version=3&playerapiid=player2","ytapiplayer2", "499", "281", "9", null, null, params, atts);
</script>
</div>

Answer 2

A little late maybe, but i was searching for the solution and i found this page.
Your code do not work now, maybe it did before but not now.
I was frustrated and now i finally made it work.
Here is a working code on today's youtube javascript api with chromeless player.
I added some custom error handling also - Showing a div instead of alert if something is wrong. Example. Embedding Disabled or wrong movieID. And 2 play buttons so you can use same functionality if you want to show a preview image before play. (Nice for Slideshow's).
Working code July 31, 2011.
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
function updateHTML(elmId, value) { document.getElementById(elmId).innerHTML = value;}
function onPlayerError(errorCode) {if (errorCode == 150) { document.getElementById("embed_disabled").style.display = 'block'; }else { if (errorCode == 2) {document.getElementById("notfound").style.display = 'block';}}}
function onYouTubePlayerReady(playerId) {
if (playerId == "player1") {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onError", "onPlayerError");
}
else if (playerId == "player2") {
ytplayer2 = document.getElementById("ytPlayer2");
ytplayer2.addEventListener("onError", "onPlayerError");
}
}
function playVideo16() { if (ytplayer) {ytplayer.playVideo();}}
function pauseVideo16() { if (ytplayer) { ytplayer.pauseVideo(); } }
function playVideo17() { if (ytplayer2) { ytplayer2.playVideo(); } }
function pauseVideo17() { if (ytplayer2) { ytplayer2.pauseVideo(); } }
function loadPlayer() {
var params = { allowScriptAccess: "always" };
var atts = { id: "ytPlayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=4PspF_GA-9U&version=3&enablejsapi=1&playerapiid=player1&showinfo=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0", "videoDiv", "480", "295", "10", null, null, params, atts);
var params = { allowScriptAccess: "always" };
var atts = { id: "ytPlayer2" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=G68fHZig9nA&version=3&enablejsapi=1&playerapiid=player2&showinfo=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0", "videoDiv2", "480", "295", "10", null, null, params, atts);
}
function _run() { loadPlayer();}
google.setOnLoadCallback(_run);
</script>
<div id="embed_disabled" style="color:#fff;position:absolute;background:#000;width:959px;height:5500px;z-index:100000;display:none">Embed disabled</div>
<div id="notfound" style="color:#fff;position:absolute;background:#000;width:959px;height:5500px;z-index:100000;display:none">Movie not found</div>
<div id="preview_videoDiv" onclick="this.style.display='none';playVideo16()" style="cursor:pointer;color:#fff;position:absolute;background:#000;width:480px;height:295px;z-index:100000;text-align:center;"><p style="padding-top:100px">Start movie</p></div>
<div id="videoDiv">Loading...</div>
<div style="clear:both;">Play | Pause</div>
<div id="preview_videoDiv2" onclick="this.style.display='none';playVideo17()" style="cursor:pointer;color:#fff;position:absolute;background:#000;width:480px;height:295px;z-index:100000;text-align:center;"><p style="padding-top:100px">Start movie</p></div>
<div id="videoDiv2" style="clear:both;">Loading...</div>
<div style="clear:both;">Play | Pause</div>

Answer 3

fixed:
<script type="text/javascript">
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");
}
}
}
</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&version=3&playerapiid=player2","ytapiplayer2", "499", "281", "9", null, null, params, atts);
</script>
</div>