Skip to content

Instantly share code, notes, and snippets.

@jhammann
Created March 11, 2014 09:20
Show Gist options
  • Select an option

  • Save jhammann/9482242 to your computer and use it in GitHub Desktop.

Select an option

Save jhammann/9482242 to your computer and use it in GitHub Desktop.
I want to execute some Javascript when a YouTube iframe changes its state (paused, stopped, played etc). You need to include the YouTube player API and make sure you enable it in your iframe embed code. This code works for multiple iframes on the same page.
$(".latest_work2 .swiper").on("change-class", function(){
// if the swiper div has the class 'pause' (which it receives when a YT video is not playing) it stops the cycle
if (slideshow2.slides.length > 3){
if ($(".latest_work2 .swiper").hasClass("pause")){
slideshow2.stopAutoplay()
} else {
slideshow2.startAutoplay()
}
}
});
var player;
function onYouTubeIframeAPIReady() {
$(".swiper iframe").each(function(){
var frameId = $(this).attr("id");
player = new YT.Player(frameId, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
}
var playerReady = false;
function onPlayerReady(event) {
playerReady = true;
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING ) {
$(".swiper").addClass("pause").trigger('change-class');
} else {
$(".swiper").removeClass("pause").trigger('change-class');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment