CODEWITHSUNDEEP
javascriptyoutubecarouselflickity
Åsmund Sollihøgda
Åsmund Sollihøgda

Reputation: 127

Pause YouTube video on next slide with Flickity

I'm using Flickity to create a slider that contains both images, video and youtube embeds (using Wordpress Advanced Custom Fields oEmbed).

I'm looking to pause the playing video on the flickity-event select (next slide).

My code works with the video-embed, but I can't seem to pause the YouTube player.

There are multiple YouTube slides in the slider, within iFrames that Advanced Custom Fields don't allow me to give class names.

Simplifyed HTML structure:

<div class="carousel">
    <img src="image" />
    <div class="video"><video src="somevideo" /></div>
    <div class="video"><iframe>YOUTUBE-EMBED</iframe></div>
</div>

My javascript:

$('.carousel').flickity({
    // slider options
});

var $carousel = $('.carousel').flickity();
$carousel.on( 'select.flickity', function( event, index ) {
    $('.video').find('video').each(function() {
        this.pause();
    });
});

The pause function works with the embedded but not the . Any ideas?

I have tried with:

    $('.video').find('iframe').each(function() {
        ytplayer.pauseVideo();
        this.pauseVideo();
    });

And

    if (ytplayer) {
        ytplayer.pauseVideo();
    }

...without luck

Any ideas?

Cheers!

Upvotes: 0

Views: 1159

Answers (3)

Anatoli
Anatoli

Reputation: 1

flkty.on( 'change', function( index ) {
    document.querySelectorAll(".video-slider__cell").forEach(videoSlideCell => {
        let videoFrame = videoSlideCell.querySelector(".video-slider__cell-video");
        if(document.body.contains(videoFrame)) {
            videoSlideCell.querySelector(".video-slider__cell-video").contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
    });
});

With this Code you can handle the play and pause in multiple cells with pure Vanilla JS. Replace my variables with your variables and it works just great!

Fo

Upvotes: 0

chrisPbacon
chrisPbacon

Reputation: 181

Åsmund Sollihøgda's answer didn't work for me with multiple YouTube videos so I adapted it slightly and added auto play for the current video.

$slider.on( 'select.flickity', function( event, index ) {

            $('iframe').each(function( i, el ) {

                if( i == index ){
                    $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); 
                } else {
                    $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); 
                }
                
            });   

        });

Upvotes: 1

&#197;smund Sollih&#248;gda
&#197;smund Sollih&#248;gda

Reputation: 127

I used the advanced custom fields oembed settings like this to add "enablejsapi":

<?php
$iframe = get_sub_field('url');
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
    'enablejsapi' => 1
);
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);
// add extra attributes to iframe html
$attributes = 'class="youtube"';

$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);

echo $iframe;
?>

Then I added this to the flickety-event:

var $carousel = $('.content-fields-carousel').flickity();
$carousel.on( 'select.flickity', function( event, index ) {
    $('.video').find('video').each(function() {
        this.pause();
    });
    $('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');    
});

This worked.

Upvotes: 0

Related Questions