Second JavaScript function cancelling first - youtube-api

Question

I am using the youtube video api and ahve 2 seperate lightboxes that open the same video. One for mobile and one for desktop.
The problem I am having is that once I place seperate code for the mobile version the desktop version stops working. What I mean is that the lightbox still opens but the video does not dsiplay.
Desktop (video-home-popup) and mobile (video-homepopup-mobile) code:
<div id="video-home-popup" style="display:none; padding:0px;">
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
modestbranding: true,
theme: 'light',
rel: 0,
wmode: "opaque",
autoplay: '0'
},
height: '480',
width: '640',
videoId: '4IXAxJ8oPFg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
/// event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
_gaq.push(['_trackEvent', 'Videos', 'Play',
player.getVideoUrl()]);
}
if (event.data == YT.PlayerState.PAUSED) {
_gaq.push(['_trackEvent', 'Videos', 'Paused',
player.getVideoUrl()]);
}
if (event.data == YT.PlayerState.ENDED) {
_gaq.push(['_trackEvent', 'Videos', 'Watch to End',
player.getVideoUrl()]);
}
}
// ]]>
</script>
</div>
<div id="video-home-popup-mobile" style="display:none; padding:0px;">
<div id="player1"></div>
<script type="text/javascript">
var player1;
function onYouTubePlayerAPIReady() {
player1 = new YT.Player('player1', {
player1Vars: {
modestbranding: true,
theme: 'light',
rel: 0,
wmode: "opaque",
autoplay: '0'
},
height: 'auto',
width: 'auto',
videoId: '4IXAxJ8oPFg',
});
}
// ]]>
</script>
</div>

Answer 1

Don't use two function : onYouTubePlayerAPIReady()
Live demo
<div id="player"></div>
<div id="player1"></div>
And the JS
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player1 = new YT.Player('player1', {
player1Vars: {
modestbranding: true,
theme: 'light',
rel: 0,
wmode: "opaque",
autoplay: '0'
},
height: 'auto',
width: 'auto',
videoId: '4IXAxJ8oPFg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
} else {
}
}
function stopVideo() {
player.stopVideo();
}