user3003810 user3003810 - 1 year ago 291
jQuery Question

pause flexslider slideshow when play youtube video

I'm trying to pause the slideshow of flexslider when play embed youtube video inside flexslider. I tried the following code but i got this error when I click on next/prev buttons .. you can see jsfiddle

Uncaught TypeError: $(...).data(...).pauseVideo is not a function

js code

var slider, // Global slider value to force playing and pausing by direct access of the slider control
canSlide = true; // Global switch to monitor video state

// Load the YouTube API. For some reason it's required to load it like this
var tag = document.createElement('script');
tag.src = "//";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Setup a callback for the YouTube api to attach video event handlers
window.onYouTubeIframeAPIReady = function(){
// Iterate through all videos
$('.flexslider iframe').each(function(){
// Create a new player pointer; "this" is a DOMElement of the player's iframe
var player = new YT.Player(this, {
playerVars: {
autoplay: 0

// Watch for changes on the player
player.addEventListener("onStateChange", function(state){
// If the user is playing a video, stop the slider
case YT.PlayerState.PLAYING:
canSlide = false;
// The video is no longer player, give the go-ahead to start the slider back up
case YT.PlayerState.ENDED:
case YT.PlayerState.PAUSED:
canSlide = true;

$(this).data('player', player);

// Setup the slider control
slider = $(".mainslider")
animation: "fade",
easing: "swing",
slideshowSpeed: 6500,
animationSpeed: 900,
pauseOnHover: true,
pauseOnAction: true,
touch: true,
video: true,
controlNav: true,
animationLoop: true,
slideshow: true,
useCSS: false,
// Before you go to change slides, make sure you can!
before: function(){

slider.on("click", ".flex-prev, .flex-next", function(){
canSlide = true;
$('.flexslider iframe').each(function(){

Answer Source

You just need to add ?enablejsapi=1 to the end of your iframe src. <iframe class="embed-responsive-item" src=""></iframe>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download