I have 4 videos built with the youtube's API on one page ( loading multiple video players with youtube api)
I need to show one video at a time so I'm hiding and showing each div id with a click in the navigation, but it appears that the videos stop playing automatically when going back to one at a later point, how can I make the videos play automatically?
<ul>
<li id="play1"><a href="">Video 1</a></li>
<li id="play2"><a href="">Video 2</a></li>
<li id="play3"><a href="">Video 3</a></li>
<li id="play4"><a href="">Video 4</a></li>
</ul>
<div id="player1"></div>
<div id="player2" style="display:none;"></div>
<div id="player3" style="display:none;"></div>
<div id="player4" style="display:none;"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player1', {
height: '390',
width: '640',
videoId: 'KcXxHZssCh4',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: 'ZGDwEr0GT10',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player3 = new YT.Player('player3', {
height: '390',
width: '640',
videoId: 'Cgk-LdjxVZg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player4 = new YT.Player('player4', {
height: '390',
width: '640',
videoId: 'H5RsI3aIkVg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
$('#play1').click(function(){
$('#player1').show();
$('#player2, #player3, #player4').hide();
return false;
});
$('#play2').click(function(){
$('#player2').show();
$('#player1,#player3, #player4').hide();
return false;
});
$('#play3').click(function(){
$('#player3').show();
$('#player1,#player2, #player4').hide();
return false;
});
$('#play4').click(function(){
$('#player4').show();
$('#player1, #player2, #player3').hide();
return false;
});
</script>
Thanks!
