Slider Proで動画再生時は自動スライドを止める設定について

Question

Slider Proでyoutubeの複数の動画を自動スライドさせて、動画再生時はスライドをストップさせようとしています。
オプション設定はplayVideoActionを'stopAutoplay'にすればいいと思うのですが、動画再生時も自動スライドが止まりません。
設定に問題があるでしょうか。
よろしくお願いします。

http://www.geocities.jp/hydethchang/

オプション

	<script>
		$( document ).ready(function( $ ) {
		  $('#wide').sliderPro({
		    width: 400,//高さ
		    height: 230,//高さ
		    arrows: true,//左右の矢印
		    buttons: true,//ナビゲーションボタンを出す
		    slideDistance:0,//スライド同士の距離
		    visibleSize: '100%',//前後のスライドを表示
		    autoplay: true,//自動再生
		    autoplayDelay: 2000,//自動再生の間隔
		    playVideoAction: 'stopAutoplay',//映像の再生開始時にスライダーのアクション
		    touchSwipe: true,//ナビゲーションボタンを出す
		    forceSize: 'fullWidth',//幅いっぱいに表示
		  });
		});
	</script>

ソースコード

	<div id="wide" class="slider-pro">
	  <div class="sp-slides">
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/rRzxEiBLQCA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/gJX2iy6nhHc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/2WY1wrwpd3k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/3mKGLNBMINs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/wsl8HS_lVHE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	  <!--/ sp-slides--></div>
	<!--/ wide--></div>

ソースコード（変更後）

	<div id="wide" class="slider-pro">
	  <div class="sp-slides">
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/rRzxEiBLQCA?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/gJX2iy6nhHc?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/2WY1wrwpd3k?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/3mKGLNBMINs?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	    <div class="sp-slide">
	      <iframe width="400" height="230" src="https://www.youtube.com/embed/wsl8HS_lVHE?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	    </div>
	  <!--/ sp-slides--></div>
	<!--/ wide--></div>

Answer 1

マニュアルにはパラメータが必要と書かれていますね。

【slider-pro/modules.md at master · bqworks/slider-pro · GitHub】
https://github.com/bqworks/slider-pro/blob/master/docs/modules.md#17-video

When using the second method, the videos will need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by &.

Comments

[hydethchang]

ご教授ありがとうございます。
マニュアルと同じパラメータを付けてソースコードを更新しました。
サンプルページも同様に更新して確認しましたが、動画再生時に自動スライドは止まりませんでした。

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も後から見た人に「直したこと」がわかるようにしてください。

再生時にコードの読み込みに失敗しているようなので、slider-proのバージョンが古いかYouTubeの仕様が変わったかどちらかではないでしょうか。

[hydethchang]

失礼いたしました。質問を修正しました。
slider-proのバージョンも最新ですし、divを削除してiframe にclassを設定したり等しましたが状況が改善しませんでした。
自動スライドを諦めるとかエンベットを止める等で対応しようかと思います。
ありがとうございました。