複数のYouTubeをスライドで表示する場合の覚え書きです。
YouTubeの簡単な埋め込みはYoutubeで発行されるタグをそのまま貼り付けるのが簡単ですが、
スライドで表示する場合、そのままでは動いているYoutubeは自動では停止しません。
その上、今回、Wordpressご利用ご希望でユーチューブはご自分で更新したいとのご希望。
そのため、タグの貼り付けは簡単にする必要がありました。
そこで、今回はYouTube Data API を利用することに。

YouTubeで各々のYoutube IDを取得

https://www.youtube.com/watch?v=●●●●●●

●●●●●●の部分がＩＤです。

WordPressテンプレートにYoutubeの読み込み

今回、開始にしたくないので「onPlayerReady」は入れていませんので開始すると音がなります。

var ytWidth = 640;
var ytHeight = 390;
var ytData = [
    {
        id: '<?php echo get_field('move1');?>',
        area: 'player01'
    }, {
        id: '<?php echo get_field('move2');?>',
        area: 'player02'
    }, {
          id: '<?php echo get_field('move3');?>',
        area: 'player03'
    },{
          id: '<?php echo get_field('move4');?>',
        area: 'player04'
    }
];
 
var ytPlayer = [];
var ytPlaying, ytStop, ytPlay;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
function onYouTubeIframeAPIReady() {
    for(var i = 0; i &amp;amp;lt; ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
            height: ytHeight,
            width: ytWidth,
            videoId: ytData[i]['id'],
        });
    }
}

slickの設定

$("#youtube ul").slick({});

$("#youtube ul").on("beforeChange", function (event, slick, currentSlide, nextSlide) {　//次のスライドに移る前に指示
a=currentSlide;//現在のスライドを取得
ytPlayer[a].pauseVideo();//現在の動画を一時停止
});