New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Stop the Flexsilder when the Youtube Video is Playing. #346

Closed
keneater opened this Issue Sep 28, 2012 · 48 comments

Comments

Projects
None yet
@keneater

keneater commented Sep 28, 2012

I cant find any information on this one.
This is my site.
http://spyking.org

After the video is played on the main page the Slider still moves and Slides, How do i fix this?

@rafo

This comment has been minimized.

rafo commented Oct 15, 2012

I have the same issue...

@raiderturbo

This comment has been minimized.

raiderturbo commented Oct 25, 2012

It's because there is no way of the slider being able to tell if the video is playing - ie. the video itself does not throw any callback event etc. I'm interested to know if anyone has a way of achieving this though...

@rafo

This comment has been minimized.

rafo commented Oct 25, 2012

@raiderturbo Well, I think it is possible to determine the state of the video :https://developers.google.com/youtube/iframe_api_reference#Playback_status

@raiderturbo

This comment has been minimized.

raiderturbo commented Oct 25, 2012

Thanks for the link... I'll look into:

player.getPlayerState():Number

@ghost

This comment has been minimized.

ghost commented Feb 5, 2013

Did anyone make any progress on this?

@Duppi

This comment has been minimized.

Duppi commented Feb 20, 2013

I handle it now with two players (YouTube and Vimeo) its working perfect for me.
Youtube Videos insert via IFRAME, you need add a class (for me class="play3") so you can add mutch more Videos from Youtube.

Here is my Code
jQuery(window).load(function() {

var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
        player = vimeoPlayers[i];
        $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
     jQuery('.flexslider').flexslider("pause");
    });

    froogaloop.addEvent('pause', function(data) {
        jQuery('.flexslider').flexslider("play");
    });
}

jQuery(".flexslider")

.flexslider({
    animation: "slide",
    animationLoop: true,
    smoothHeight: true,
    slideshow: true,
    useCSS: false,
    before: function(slider){
        if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
           $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
           /* ------------------  YOUTUBE FOR AUTOSLIDER ------------------ */
           playVideoAndPauseOthers($('.play3 iframe')[0]);
    }


});

function playVideoAndPauseOthers(frame) {
$('iframe').each(function(i) {
var func = this === frame ? 'playVideo' : 'stopVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}

/* ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ */
$('.flex-next, .flex-prev').click(function() {
playVideoAndPauseOthers($('.play3 iframe')[0]);
});


});
@mattyza

This comment has been minimized.

Member

mattyza commented Feb 20, 2013

Looks good, @Duppi. :)

@mattyza mattyza closed this Feb 20, 2013

@Duppi

This comment has been minimized.

Duppi commented Feb 20, 2013

i hope so :)

@warlockdn

This comment has been minimized.

warlockdn commented Feb 25, 2013

cool this works.. :)

@thadbloom

This comment has been minimized.

thadbloom commented Feb 27, 2013

I get an error using this code, "Error: ReferenceError: $f is not defined."

@Duppi

This comment has been minimized.

Duppi commented Feb 27, 2013

@thadbloom, you need Froogaloop.js for Vimeo, thats why you get this error

@keithcorcoran

This comment has been minimized.

keithcorcoran commented Mar 2, 2013

@Duppi I tried this and unfortunately it did now work for me with youtube video. it is working for Vimeo but not Youtube.

To test I made slide 1 contain a youtube video with the following code:

<iframe class="play3" width="300" height="180" src="http://www.youtube.com/embed/i-YNMdYQaog?showinfo=0" frameborder="0" allowfullscreen ></iframe>

Slide 2 contains the following embed code:

<iframe id="player_1" src="http://player.vimeo.com/video/18499580?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

My HTML renders like this for the youtube slide:

<div id="featured" class="flexslider clearfix">
  <ul class="slides">
     <li id="narrow-feature-post-1" style="width: 100%; float: left;
       margin-right: -100%; position: relative; display: none;" class="">
       <div class="slide-container clearfix">
         <div class="feature-video">
           <div class="video">
              <iframe class="play3" width="300" height="180" frameborder="0"
                allowfullscreen="" src="http://www.youtube.com/embed/i-YNMdYQaog?showinfo=0">
           </div>

...etc

My JS is exactly pasted from your above example.

As I mentioned, the vimeo video pauses the slideshow but the youtube video does not.
Is there something I have done wrong?

@prebyter

This comment has been minimized.

prebyter commented Mar 3, 2013

The Youtube version doesn't work for me, either.

// As soon as I click outside the video frame (it stops the video and) the slideshow starts again.

@keithcorcoran

This comment has been minimized.

keithcorcoran commented Mar 3, 2013

I have a feeling it might have to do with targeting either getting the event from the video or pausing the flexslider. Hopefully @Duppi can help. There doesn't seem to be a fix for this ANYWHERE i could find online which seems really wierd.

@mattyza

This comment has been minimized.

Member

mattyza commented Mar 3, 2013

You'd most likely need to include a YouTube API wrapper, as with froogaloop for the Vimeo videos.

Otherwise, you'd have no means of controlling the YouTube video. :)

@keithcorcoran

This comment has been minimized.

keithcorcoran commented Mar 4, 2013

thanks @mattyza . I will have to see if I can figure that out. From @Duppi 's post I assumed he had solved the issue fully with that bit of code. I did assume it has something to do with targeting the element whether it be via the selectors, etc.

@Duppi

This comment has been minimized.

Duppi commented Mar 4, 2013

@keithcorcoran - mattyza is right, try to insert enablejsapi = 1, for example :
http://www.youtube.com/embed/i-YNMdYQaog?showinfo&enablejsapi=1

@keithcorcoran

This comment has been minimized.

keithcorcoran commented Mar 4, 2013

@Duppi - thanks for the 'enablejsapi' variable. I added this to the src URL but unfortunately it had no effect on pausing the slide show. (I was really hoping it would).

@Duppi

This comment has been minimized.

Duppi commented Mar 4, 2013

You attempt a ID calls (# featured)! But you have to attempt the iframe not the div!

<iframe class="play3" height="180" frameborder="0" width="300" src="http://www.youtube.com/embed/i-YNMdYQaog?showinfo=0&wmode=opaque&enablejsapi=1">

You can respond in jquery only one ID. If you want access multiple youtube videos you have to change you id into a class.

/* ------------------  YOUTUBE FOR AUTOSLIDER ------------------ */
       //playVideoAndPauseOthers($('.play3 iframe')[0]);

This line is wrong
playVideoAndPauseOthers(jQuery('#featured iframe')[0]);

try to change this line in:

playVideoAndPauseOthers(jQuery('.play3 iframe')[0]);

because you iframe is a class (.play3) not a ID (#featured)

the same here:

/* ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ */
jQuery('.flex-next, .flex-prev').click(function() {
//playVideoAndPauseOthers($('.play3 iframe')[0]);

playVideoAndPauseOthers(jQuery('#featured.play3')[0]);

@Duppi

This comment has been minimized.

Duppi commented Mar 4, 2013

May you got a link to the site, and I try it tonight when I'm home

@keithcorcoran

This comment has been minimized.

keithcorcoran commented Mar 5, 2013

@Duppi @mattyza - I got this working using the youtube API but I think it only works with a single video since I am targeting it using the iframe ID. I would like to figure out how to get it working using classes instead.

Here's the code i ended up with.
The biggest issue I seemed to be having was that I wasn't getting any events from the youtube iframe until I loaded in player.api from youtube.

Even though I was using the iframe embed code and not building the standalone player I learned I still had to pull in the api script to be able to receive the events from the youtube iframe.

// Youtube and Vimeo Flexslider Control
// Partly from Duppi on GitHub, partly from digging into the YouTube API
// Need to set this up to use classes instead of IDs

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

jQuery(window).load(function() {
    jQuery('#featured').flexslider({
        slideshowSpeed: 5000,
        directionNav:false,
        pauseOnHover:false,
        video: true,
        controlsContainer: ".narrow-slider"
    });

var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
        player = vimeoPlayers[i];
        $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
     jQuery('.flexslider').flexslider("pause");
    });

    froogaloop.addEvent('pause', function(data) {
        jQuery('.flexslider').flexslider("play");
    });
}

jQuery(".flexslider")

.flexslider({
    before: function(slider){
        if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
           $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
           /* ------------------  YOUTUBE FOR AUTOSLIDER ------------------ */
           playVideoAndPauseOthers($('.play3 iframe')[0]);
    }


});

function playVideoAndPauseOthers(frame) {
jQuery('iframe').each(function(i) {
var func = this === frame ? 'playVideo' : 'stopVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}

/* ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ */
jQuery('.flex-next, .flex-prev').click(function() {
playVideoAndPauseOthers($('.play3 iframe')[0]);
});



//YOUTUBE STUFF

function controlSlider(event) {
    console.log(event);
    var playerstate=event.data;
    console.log(playerstate);
    if(playerstate==1 || playerstate==3){
        jQuery('.flexslider').flexslider("pause");
    };
    if(playerstate==0 || playerstate==2){
        jQuery('.flexslider').flexslider("play");
    };
};

var player = new YT.Player('youtubevideo', {
    events: {
      'onReady': function(event) { console.log(event); },
      'onStateChange': function(event) { controlSlider(event); }
    }
  }); 
});
@thendricksen

This comment has been minimized.

thendricksen commented Mar 14, 2013

Boom!!! Figured it out!!! This version is for YouTube videos only (as my client doesn't use Vimeo). But here you go!

All I did was load the YouTube iFrame API reference (https://developers.google.com/youtube/iframe_api_reference), and used their examples to setup the slider to be paused on the player status change.

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer1', {
            videoId: '93BFqiKo4DQ',
            playerVars: { 'controls': 0, 'modestbranding': 1, 'showinfo': 0 },
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
      }
      
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING ) {
            $('.bh-featured-slider').flexslider("pause");
        }
        if (event.data == YT.PlayerState.PAUSED ) {
            $('.bh-featured-slider').flexslider("play");
        }
      }
    $(window).load(function() {
      $('.bh-featured-slider').flexslider({
        animation: "slide",
        directionNav: false,
        video: true,
        pauseOnHover: true, 
      });
    });
@keithcorcoran

This comment has been minimized.

keithcorcoran commented Mar 15, 2013

Thanks for posting this.
Ironically, the person wanting this feature from me ended up pulling out videos from the slider to put them in a separate section. haha.

I will need this for the next site though. THANKS!

@FlyingEggroll

This comment has been minimized.

FlyingEggroll commented Mar 25, 2013

@thendricksen I'm not quite sure where to add the code u posted! I'd like to implement this into wordpress and replace the built in flexslider to this one.

@thedxt

This comment has been minimized.

thedxt commented Apr 24, 2013

@thendricksen one problem everything looks like it should work but now my slides have stopped moving. how are you listing the different videos on each slide?

@thendricksen

This comment has been minimized.

thendricksen commented Apr 24, 2013

@FlyingEggroll - the code should be dropped in the footer.php file of your theme. I did it for a bit university who used it in their templates.

@thedxt - Can you take the code out, and see if your slider is still working?

@johndoeherty

This comment has been minimized.

johndoeherty commented Apr 29, 2013

@FlyingEggroll - any chance you could post a link to a working example? Thanks

@satyadeepk

This comment has been minimized.

satyadeepk commented May 8, 2013

@thendricksen I tried using your youtube iframe api code above, but the onStateChange event fires only when the player loads for the first time. But it is not fired when the video is played or paused. Any suggestions?

I tried on both Chrome Version 26.0.1410.64 m & Firefox 18.0

@daybot

This comment has been minimized.

daybot commented Jul 2, 2013

Got it working, hope this helps anyone looking for the answer.

the html

<div id="hero">
    <div class="flexslider">
        <ul class="slides">

        <li class="slide play3">
            <iframe width="560" height="315" id="youtubevideo" src="http://www.youtube.com/embed/YOURVIDEOID?enablejsapi=1&version=3&playerapiid=youtubevideo" allowfullscreen="" frameborder="0"></iframe>
        </li>

        </ul>
    </div>
</div>

In the footer

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>  

Obviously also load flexslider and fitvids if using it.

the JS

// Youtube and Vimeo Flexslider Control
// Partly from Duppi on GitHub, partly from digging into the YouTube API
// Need to set this up to use classes instead of IDs

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

jQuery(window).load(function() {
    jQuery('#hero .flexslider').flexslider({
        useCSS: false,
        animation: "slide",
        directionNav: true,
        controlNav: false,
        animationLoop: true,
        //slideshow: false,
        pauseOnAction: true,
        pauseOnHover: true,
        video: true,
    });

var vimeoPlayers = jQuery('#hero .flexslider').find('iframe'), player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
        player = vimeoPlayers[i];
        $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
     jQuery('#hero .flexslider').flexslider("pause");
    });

    froogaloop.addEvent('pause', function(data) {
        jQuery('#hero .flexslider').flexslider("play");
    });
}

jQuery("#hero .flexslider")

.flexslider({
    before: function(slider){
        if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
           $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
           /* ------------------  YOUTUBE FOR AUTOSLIDER ------------------ */
           playVideoAndPauseOthers($('.play3 iframe')[0]);
    }


});

function playVideoAndPauseOthers(frame) {
jQuery('iframe').each(function(i) {
var func = this === frame ? 'playVideo' : 'stopVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}

/* ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ */
/*
jQuery('.flex-next, .flex-prev').click(function() {
playVideoAndPauseOthers($('.play3 iframe')[0]);
});

*/

//YOUTUBE STUFF

function controlSlider(event) {
    console.log(event);
    var playerstate=event.data;
    console.log(playerstate);
    if(playerstate==1 || playerstate==3){
        jQuery('#hero .flexslider').flexslider("pause");
    };
    if(playerstate==0 || playerstate==2){
        jQuery('#hero .flexslider').flexslider("play");
    };
};

var player = new YT.Player('youtubevideo', {
    events: {
      'onReady': function(event) { console.log(event); },
      'onStateChange': function(event) { controlSlider(event); }
    }
  }); 
});
@ruudbwai

This comment has been minimized.

ruudbwai commented Aug 9, 2013

@daybot excellent. Thanks a bunch, this works for me!

@weissmike

This comment has been minimized.

weissmike commented Aug 30, 2013

I went about it a different way. I wasn't using Vimeo, so I removed that bit, but it looks like it would be easy enough to add back in.

I was using oEmbed, so my iframes didn't have ID's, and I had to set them.
I also didn't want to hardcode the ID into YT.Player call.

Here is my gist.

@ghost

This comment has been minimized.

ghost commented Oct 18, 2013

I've tried employing a few of these different recommendations and am having trouble getting any of them to work as expected. Duppi's is the closest. The YouTube videos will auto-pause when a slide is changed, but the slideshow will not stop rotating when a video is playing. Any tips would be greatly appreciated. Here's my code:

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<script>
jQuery(window).load(function() {

var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
        player = vimeoPlayers[i];
        $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
     jQuery('.flexslider').flexslider("pause");
    });

    froogaloop.addEvent('pause', function(data) {
        jQuery('.flexslider').flexslider("play");
    });
}

jQuery(".flexslider")
.fitVids()
.flexslider({
        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: function(slider){
        if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
           $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
           /* ------------------  YOUTUBE FOR AUTOSLIDER ------------------ */
           playVideoAndPauseOthers($('.play3 iframe')[0]);
    }


});

function playVideoAndPauseOthers(frame) {
$('iframe').each(function(i) {
var func = this === frame ? 'playVideo' : 'stopVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}

/* ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ */
$('.flex-next, .flex-prev').click(function() {
playVideoAndPauseOthers($('.play3 iframe')[0]);
});


});

</script>

Each of my slides has some extra divs and content inside, but I don't think the problem is the extra divs.

                        <!-- Begin Slide: Video Test -->                    
                        <li data-thumb="/CONTENT/hero-slideshow/Hero-Slideshow-Image-Test.jpg">

                            <div class="media">
                                <!-- Video -->
                                <iframe width="600" height="338" src="//www.youtube.com/embed/qxLAjLVbZNI?enablejsapi=1" frameborder="0" class="play3"></iframe>
                                <!-- /Video -->
                            </div><!-- /media -->

                            <div class="slider-text">
                                <div class="slider-text-content">   
                                    <h2><a href="#" class="border-radius">Brief Title Test</a></h2>
                                    <p class="slider-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    <a href="#" class="call"><strong>Call to Action &raquo;</strong></a>
                                </div><!-- /.slider-text-content -->
                            </div><!-- /.slider-text -->
                        </li>
                        <!-- End Slide -->

Any ideas how to make the slides stop rotating when a YouTube video is playing? Since the will pause when a slide changes, I'm thinking it shouldn't take a major tweak to stop them.

Thanks!
Brian

@LordZardeck

This comment has been minimized.

LordZardeck commented Oct 28, 2013

This is what I got to work: https://gist.github.com/LordZardeck/7205720

@ghost

This comment has been minimized.

ghost commented Oct 29, 2013

Thank you LordZardeck, this worked for me!

@raisonon

This comment has been minimized.

raisonon commented Nov 9, 2013

Hi Guys, I've used LordZardeck's code but not had any luck. I suspect I'm missing something obvious!

I've pasted up a quick gist which shows how I've amended Zardecks code. Any chance you could have a quick look and let me know how you got it to work?

https://gist.github.com/raisonon/7384502

You can see my original snippet which slides .home-vid which worked---- i've renamed this home-vid-old

Many Thanks.

@raisonon

This comment has been minimized.

raisonon commented Nov 9, 2013

Ok, just to say I fixed this by including: selector: "ul > li",

However it is worth pointing out that the slider does not pause until the video is playing. So if the user plays the video but it takes a few seconds to load, the slide may change before the video loads and then the slide is paused on another slide.

I only noticed because I'm using slow 3g at the moment, but probably not a problem for faster broadband...

@thainguyenit

This comment has been minimized.

thainguyenit commented Dec 13, 2013

Hi All
I tried it and there is a bug:

  • On mobile devices: when I view the 1st video then click pause. After that I click on 2nd video and play , there is still 1st video.

My code: http://focode.com/demo/slider/test-video.html
please help me to fix this bug, thank you.

@FriendlyWP

This comment has been minimized.

FriendlyWP commented Jan 11, 2014

I've tried just about all of the above examples, alone and in combination, and am still stumped. The first video in my flexslider plays correctly, pausing the slideshow, but the second video keeps playing without pausing the slideshow, and when I try playing the first video again same thing - no slideshow pause.

Here's a live example that uses the code below: http://tmi.friendlyweb.us/people/sample-page/

And here's my jQuery: https://gist.github.com/FriendlyWP/8375571

Thanks for your help!

@fakeartist

This comment has been minimized.

fakeartist commented Jan 24, 2014

Excellent work @LordZardeck, this worked for me too!

@badincite

This comment has been minimized.

badincite commented Apr 23, 2014

Could get any of this to work here's what I ended up using

<iframe width="560" height="315" src="https://www.youtube.com/embed/1RbezqaqKw8?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>

The "enablejsapi=1" is important there

Javascript

(function(){
var s = document.createElement("script");
s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
var before = document.getElementsByTagName("script")[0];
before.parentNode.insertBefore(s, before);
})();

var YT_ready=(function(){var b=[],c=false;return function(a,d){if(a===true){c=true;while(b.length){b.shift()()}}else if(typeof a=="function"){if(c)a();else bd?"unshift":"push"}}})();
YT_ready(function() {
var frameID = "yourIframeID"
var player = new YT.Player(frameID, {
events: {
"onStateChange": function(event) {
if (event.data == 1 || event.data == 3) {
$('.flexslider').flexslider("pause");
}
else if (event.data == 0 || event.data == 2 || event.data == 5) {
$('.flexslider').flexslider("play");
}
}
}
});
})(jQuery);
function onYouTubePlayerAPIReady() {
YT_ready(true)
}

@jehoshua02

This comment has been minimized.

jehoshua02 commented Jun 30, 2014

Has anybody tested any of this on iOS? LOL.

@Dazeh

This comment has been minimized.

Dazeh commented Aug 1, 2014

I can believe this isnt something that is built into Flexslider. Also, Ive tried most of the ways above but the slides keep on moving, pausing the video until the next time it comes around.

@telemarker

This comment has been minimized.

telemarker commented Apr 11, 2015

check out this thread for html5 video solution:
#1286

@adalbertohofmanns

This comment has been minimized.

adalbertohofmanns commented Aug 18, 2015

i just changed 0 to 1 on playVideoAndPauseOthers($('.ctv-directors-frame iframe')[1]);

like below

before: function(slider){
if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
$f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
/* ------------------ YOUTUBE FOR AUTOSLIDER ------------------ */
playVideoAndPauseOthers($('.ctv-directors-frame iframe')[1]);
}

@adalbertohofmanns

This comment has been minimized.

adalbertohofmanns commented Aug 18, 2015

jQuery(window).load(function() {
var Projeto = {};

var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
        player = vimeoPlayers[i];
        $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
     jQuery('.flexslider').flexslider("pause");
    });

    froogaloop.addEvent('pause', function(data) {
        jQuery('.flexslider').flexslider("play");
    });
}

jQuery(".flexslider")

.flexslider({
    animation: "fade",
    easing: "swing",
    keyboard: true,
    slideshow: true,
    controlNav: false,
    directionNav: true,
    animationLoop: true,
    touch: false,
    video: true,
    initDelay: 500,
    pauseOnHover: true, 
    animationSpeed: 765,
    smoothHeight: false,
    before: function(slider){
        if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
           $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id')  ).api('pause');
           /* ------------------  YOUTUBE FOR AUTOSLIDER ------------------ */
           playVideoAndPauseOthers($('.ctv-directors-frame iframe')[1]);
    }


});

function playVideoAndPauseOthers(frame) {
    $('iframe').each(function(i) {
        var func = this === frame ? 'playVideo' : 'stopVideo';
        this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
    });
}

/* ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ */
$('.flex-next, .flex-prev').click(function() {
    playVideoAndPauseOthers($('.ctv-directors-frame iframe')[0]);
});

});

@jeffikus jeffikus self-assigned this Aug 19, 2015

@voodoomotion

This comment has been minimized.

voodoomotion commented Aug 29, 2015

Hi Guys,

Well done for solving this but i can't get this working with vimeo :'( .. I need to slide from one video to the next but the previous video continues playing.

Desperate to get my student showreel website running soon. Please can somebody post the entire HTML or a example project?

Much appreciated in advance!

@psanjib

This comment has been minimized.

psanjib commented Apr 4, 2017

@Duppi, i have tried with vimeo and youtube it works fine. it save a lot time.

thanks

@Duppi

This comment has been minimized.

Duppi commented Apr 4, 2017

@psanjib you welcom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment