Clever Geek Handbook

Stop YouTube video playing when clicking next carousel slides

I have a carousel slide and I'm trying to make it so that when I click on the next slide, the YouTube video on the previous slide stops playing.

What I'm trying to do is determine if I applied to it div

display:block

. Then, if that happens when the user presses the next / prev button, the video stops.

Here is my jquery:

$('.bxslider').bxSlider({
            video: true,
            useCSS: false,
            pagerCustom: '#bx-pager'
        });

        $('.bxslider li .videoImage').click(function() {
            $('.videoImage').fadeOut('slow', function() {
                $(".videoContainer").show();
            });

            $('#playerID').get(0).stopVideo();
        });

        if($('.videoContainer').css('display') == 'block')
        {
            $('.bx-controls-direction a').click(function() {                                
                $('#video').get(0).stopVideo();
            });
        }

HTML:

<div class="bx-viewport">
    <ul class="bxslider">
        <li>    
            <div class="videoImage">
                <img src="http://placekitten.com/920/500"/>
            </div>
            <div class="videoContainer">
                <iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/g3J4VxWIM6s" frameborder="0" allowfullscreen></iframe>
            </div>
        </li>
        <li>
            <div class="videoImage">
                <img src="http://placekitten.com/920/500"/>
            </div>
            <div class="videoContainer">
                <iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            </div>
        </li>
    </ul>
</div>
<div class="bx-controls bx-has-controls-direction">
    <div class="bx-controls-direction">
        <a class="bx-prev" href="">Prev</a>
        <a class="bx-next" href="">Next</a>
    </div>
</div>
+3


source to share


1 answer


As @Boaz mentioned in the comments. You have to use the onSlideBefore callback.

$('.bxslider').bxSlider({
  video: true,
  useCSS: false,
  pagerCustom: '#bx-pager',
  onSlideBefore: beforeSlide
});

function beforeSlide($slideElement, $curIndex, $nextIndex) {
  //find the youtube player DOM element and call the .stopVideo method on the element 
}


Youtube API Docs ( player.stopVideo()

): https://developers.google.com/youtube/js_api_reference?csw=1#Playback_controls

bxSlider Docs ( onSlideBefore

): http://bxslider.com/options#onSlideBefore

0


source






More articles:


All Articles