I'm facing an issue where the iframe source does not change when the user clicks on the skip button.
var videoPlayer;
window.onYouTubePlayerAPIReady = function() {
alert('onYouTubePlayerAPIReady has been called');
player = new YT.Player('header-video__video-element', {
events: {
'onStateChange': ShowMe
}
});
}
var scriptTag = document.createElement('script');
scriptTag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);
function ShowMe() {
var status;
status = player.getPlayerState();
if (status == -1) alert("Video has not started.");
else if (status == 0) {
$('#ytplayer').replaceWith('<a href="page/" target="_blank"><img class="special_hover" src="image" alt="" /></a>')
}
else if (status == 1) {
} //Video is playing
else if (status == 2) {
}
else if (status == 3) {
} //video is buffering
else if (status == 5) {
} //Video is cued.
}
//CODE TRIGGERED BY BUTTON
$(this.settings.playTrigger).on('click', function(e) {
alert('changing source');
$("#header-video__video-element").attr('src', "https://www.youtube.com/watch?v=eozsR79JjPM");
//document.getElementById('header-video__video-element').setAttribute('src', "https://www.youtube.com/embed/eozsR79JjPM");
alert('changed');
//player.loadVideoById("95CX2VL0hVY");
// e.preventDefault();
// that.appendIframe();
});