Javascript 使用Flickity在下一张幻灯片上暂停YouTube视频

我正在使用创建一个包含图像、视频和youtube嵌入的滑块（使用Wordpress高级自定义字段）

我想暂停播放flickity活动的视频（下一张幻灯片）

我的代码适用于视频嵌入，但我似乎无法暂停YouTube播放器

滑块中有多个YouTube幻灯片，在iFrame中，高级自定义字段不允许我给出类名

简化的HTML结构：

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

暂停功能适用于嵌入式，但不适用于。有什么想法吗

我试过：

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

及

…运气不好

有什么想法吗

---

干杯

我使用了像这样的高级自定义字段oembed设置来添加“enablejsapi”：

---

这是有效的。

奥斯蒙德·索利赫赫格达的答案对我来说不适用于多个YouTube视频，所以我对其进行了轻微的调整，并为当前视频添加了自动播放功能

$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":""}', '*'); 
                }
                
            });   

        });

---

首先，您可能没有任何

ytplayer

实例，您需要先创建这些实例。听起来是对的@04FS。你能帮我找到创建实例的正确方向吗？我想我已经这样做了，通过指向文档，文档中甚至有示例…？如果你需要的不止这些，你首先需要描述你的具体问题是什么。啊，但是我确实在这里发现了一个问题，而不是

$slider.on（'select.flickity'，

它应该是

$slider.on（'change.flickity'，

），否则它会在每次调整窗口大小时开始播放视频！（因为很明显，由于某种原因，每次调整旋转木马大小时，幻灯片都是“选中的”）

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

<?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;
?>

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":""}', '*');    
});

$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":""}', '*'); 
                }
                
            });   

        });