JS 【slick.js】とYouTube

2020-07-02

前回の投稿で、slick.jsの基本的な使い方を記載しましたが、今回は、スライドショーの中にYouTubeの動画が入っている場合についてです。
スライドショーの部分にYouTubeを入れた場合、そのままでもいいですが、表示されたタイミングで、動画再生させる方法もあるので、それについてまとめます。


このようにスライドショーの間にYouTube動画があるとします。

Contents
2つ目にYouTube動画

Contents


このスライドでは、長い動画でやっているので、切り替わった時に一時停止、また表示する時に再生という形になっているので、違和感がありますが、動画を30秒前後の動画にして、切り替わるタイミングをきちんと設定すれば、動画が表示されるたびに、始めからスタートとすることができます。
また、iframeのパラメータで、 enablejsapi=1 を付与していないと、この動作はされませんので、ご注意ください。

こちらのサイトを参考にさせていただきました。
参考サイト