JavaScript pause button for YouTube video that has been cloned? - youtube-api

Question

Ive made a pause button for a YouTube video. This worked fine however now I need to clone the video. This is due to how the carousel that im using works and also so the video can be displayed in a Lightbox.
Below is a simplified version of my code. Now the pause button only works on the first video. How can I make a button that will pause all cloned videos?
http://jsfiddle.net/36vr2kjv/2/
<p class="trigger">Trigger</p>
<p class="trigger2">Trigger2</p>
<div class="player-wrap">
<div id="player"></div>
</div>
<div id="player2"></div>
var player;
$(function() {
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
$('.trigger').click(function(){
//this works
player.pauseVideo()
});
return player;
});
$(function() {
setTimeout(function(){
$('.player-wrap').clone().appendTo('#player2');
}, 2000);
});
$(function() {
$('.trigger2').click(function(){
// this does not work
player.pauseVideo()
});
});

Answer 1

Actually there is concept of deep cloning and shallow cloning. Shallow cloning does not copy events hence you have to use deep cloning. Where ever you are using clone() instead use clone(true).
For example in above code snippet you can use:
$(function() {
setTimeout(function(){
$('.player-wrap').clone(true).appendTo('#player2');
}, 2000);
});

Answer 2

Issue Description:
What's happening in your code is you are cloning and creating two IDs within a single DOM load, which means your javascript will have conflicting IDs to deal with. The other issue being that the youtube API creation function binds to an ID and not a class.
So after you've cloned your iframe, your original function (held in player) is now pointed at two places... hence the confusion.
Solution:
To combat this, we can use a placeholder. Based on the Youtube Player API Reference, Youtube allows for loading videos to a player object.
player.loadVideoById(videoId:String,
startSeconds:Number,
suggestedQuality:String):Void
[See Youtube API#Queueing_Functions]
We can use classes and object references to reach your goal:
player;
placeholder;
playerCount = 1;
$(function() {
// ... Previous code ... //
/**
* Assuming you have more than one video to play,
* the function will change to allow for incrementing the ids
* of each player made. [UNIQUE IDS]
*/
onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
player = new YT.Player('player-'+playerCount, {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
placeholder = new YT.Player('placeholder', {
height: '390',
width: '640',
});
/**
* Now add a generic class so we can find all of these elements,
* and bind the object to a data instance for access later.
*/
$('#player-' + playerCount).addClass('youtube-player').data('YoutubeAPI', player);
playerCount++;
}
The placeholder comes into play now, when you carousel fires it's beforeChange event, you can access the player element from within the current/next/previous slide using the carousel's event handler and running a $(event.target).find('youtube-player') (or something like that, APIs are different, so YMMV) and access the player instance using $(event.target).find('youtube-player').data('YoutubeAPI') (or whatever you named your data variable).
Then you just find the video id from the original object (using the access scheme from above and taking the id from the youtubeAPI object) and load the video into the placeholder using the API call from above.