I am trying to play/stop multiple YouTube iframe players on a single page. I can start the players automatically (i.e. through a custom method called loadYouTubeVideo(playerID)) upon clicking, but I am not sure how I can get access to the player objects again from another function call (i.e. through a custom method called unloadYouTubeVideo(playerID))
Here is the jsfiddle with what I am talking about: /
So each player starts, but it continues to play even after the div containing it is hidden.
By the way, I am using the iframe version of the player for a reason, so answers telling me to 'just use the flash object embed version' of the player are not acceptable for this question.
Code here in case jsfiddle is not available:
<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('');
loadYouTubePlayer = function(playerID) {
the_player = new YT.Player(playerID, {
events: { 'onReady': playYouTubeVideo }
});
};
unloadYouTubePlayer = function(playerID) {
// This is the part that's broken
$(playerID).stopVideo();
};
function playYouTubeVideo(event) {
event.target.playVideo();
}
$('.show_player').click(function() {
var idType = 'data-video-id';
var id = $(this).attr(idType);
$(this).fadeOut('fast', function() {
$('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
loadYouTubePlayer('the_player'+id);
$('.stop_player['+idType+'='+id+']').fadeIn('fast');
});
});
});
$('.stop_player').click(function() {
var idType = 'data-video-id';
var id = $(this).attr(idType);
$(this).fadeOut('fast', function() {
$('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
unloadYouTubePlayer('the_player'+id);
$('.show_player['+idType+'='+id+']').fadeIn('fast');
});
});
});
});
</script>
<div class="hidden_player" data-video-id="0" style="display:none">
<iframe id="the_player0" width="640" height="360" frameborder="0" src="" type="text/html"></iframe>
</div>
<p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p>
<p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p>
<br/><br/>
<div class="hidden_player" data-video-id="1" style="display:none">
<iframe id="the_player1" width="640" height="360" frameborder="0" src="" type="text/html"></iframe>
</div>
<p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p>
<p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p>
</body>
</html>
I am trying to play/stop multiple YouTube iframe players on a single page. I can start the players automatically (i.e. through a custom method called loadYouTubeVideo(playerID)) upon clicking, but I am not sure how I can get access to the player objects again from another function call (i.e. through a custom method called unloadYouTubeVideo(playerID))
Here is the jsfiddle with what I am talking about: http://jsfiddle/iwasrobbed/9Dj8c/3/
So each player starts, but it continues to play even after the div containing it is hidden.
By the way, I am using the iframe version of the player for a reason, so answers telling me to 'just use the flash object embed version' of the player are not acceptable for this question.
Code here in case jsfiddle is not available:
<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('http://www.youtube./player_api');
loadYouTubePlayer = function(playerID) {
the_player = new YT.Player(playerID, {
events: { 'onReady': playYouTubeVideo }
});
};
unloadYouTubePlayer = function(playerID) {
// This is the part that's broken
$(playerID).stopVideo();
};
function playYouTubeVideo(event) {
event.target.playVideo();
}
$('.show_player').click(function() {
var idType = 'data-video-id';
var id = $(this).attr(idType);
$(this).fadeOut('fast', function() {
$('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
loadYouTubePlayer('the_player'+id);
$('.stop_player['+idType+'='+id+']').fadeIn('fast');
});
});
});
$('.stop_player').click(function() {
var idType = 'data-video-id';
var id = $(this).attr(idType);
$(this).fadeOut('fast', function() {
$('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
unloadYouTubePlayer('the_player'+id);
$('.show_player['+idType+'='+id+']').fadeIn('fast');
});
});
});
});
</script>
<div class="hidden_player" data-video-id="0" style="display:none">
<iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube./embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
<p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p>
<p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p>
<br/><br/>
<div class="hidden_player" data-video-id="1" style="display:none">
<iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube./embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
<p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p>
<p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p>
</body>
</html>
- 1 Going for the fullscreen mosaic rickroll, eh? – Justin ᚅᚔᚈᚄᚒᚔ Commented Sep 23, 2011 at 16:27
1 Answer
Reset to default 4I have created a function which access framed YouTube videos through the ID of the parent of the iframe (as specified in the YT Frame API), and executes the functions defined at the JS API.
See this answer for the code and a detailled Q&A section.
My code would be implemented in this way:
callPlayer(playerID, "stopVideo");