質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

jquery モダールウインドウを閉じると同時にyoutubeを停止したい。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 10K+

yoso

score 27

素人ですがwordpressでホームページを作成しております。

動画ギャラリーとして、動画のキャプチャ画像をクリックすると
モダールウインドウが開きその中に
「iframeでyoutubeの埋め込み+説明」が表示されるようjqueryを使用し作成しました。

見た目は問題ないのですが、
1、モダールウインドウを閉じても音声が消えない(動画も再生され続けているよう)
2、別の動画を再生すると音声が二重で流れる
ことに困っています。

http://www.webdesignleaves.com/wp/jquery/625/

上記等を参考にし.remove();を用いてみたのですが

モダールウインドウを閉じると同時にyoutubeが終了(youtubeの埋め込み自体が消える)ため音声は消えますが、
再び同じ動画を見ようとモダールウインドウを開いてもyoutubeの埋め込みが非表示となり2回目の閲覧ができません。

・モダールウインドウを閉じると同時にyoutubeの再生を停止する
もしくは
・別の動画が流れ出した時点で、先に流れていた動画を停止する

方法がありましたらご教授下さい。

【現在のソースコード】

<STYLE TYPE="text/css">


span {
   display:none;
}
.modal-content {
    width: 910px ;
    height: 360px ;
    margin: 0 ;
    padding: 20px 20px ;
    border: 0px solid #aaa ;
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 2 ;
}

#modal-overlay {
    z-index: 1 ;
    display: none ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 255,255,255, 0.75 ) ;
}


.button-link {
    color: #00f ;
    text-decoration: underline ;
}

.button-link:hover {
    cursor: pointer ;
    color: #f00 ;
}

</STYLE>






<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

$(function(){


//グローバル変数
var nowModalSyncer = null ;        //現在開かれているモーダルコンテンツ
var modalClassSyncer = "modal-syncer" ;        //モーダルを開くリンクに付けるクラス名

//モーダルのリンクを取得する
var modals = document.getElementsByClassName( modalClassSyncer ) ;

//モーダルウィンドウを出現させるクリックイベント
for(var i=0,l=modals.length; l>i; i++){

    //全てのリンクにタッチイベントを設定する
    modals[i].onclick = function(){

        //ボタンからフォーカスを外す
        this.blur() ;

        //ターゲットとなるコンテンツを確認
        var target = this.getAttribute( "data-target" ) ;

        //ターゲットが存在しなければ終了
        if( typeof( target )=="undefined" || !target || target==null ){
            return false ;
        }

        //コンテンツとなる要素を取得
        nowModalSyncer = document.getElementById( target ) ;

        //ターゲットが存在しなければ終了
        if( nowModalSyncer == null ){
            return false ;
        }

        //キーボード操作などにより、オーバーレイが多重起動するのを防止する
        if( $( "#modal-overlay" )[0] ) return false ;        //新しくモーダルウィンドウを起動しない
        //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;        //現在のモーダルウィンドウを削除して新しく起動する

        //オーバーレイを出現させる
        $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
        $( "#modal-overlay" ).fadeIn( "fast" ) ;

        //コンテンツをセンタリングする
        centeringModalSyncer() ;

        //コンテンツをフェードインする
        $( nowModalSyncer ).fadeIn( "slow" ) ;


        //[#modal-overlay]、または[#modal-close]をクリックしたら…
        $( "#modal-overlay,#modal-close" ).unbind().click( function() {


            //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
            $( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() {




                //[#modal-overlay]を削除する
                $( '#modal-overlay' ).remove() ;



            } ) ;


            //現在のコンテンツ情報を削除
            nowModalSyncer = null ;

        } ) ;

    }

}


    //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
    $( window ).resize( centeringModalSyncer ) ;

    //センタリングを実行する関数
    function centeringModalSyncer() {

        //モーダルウィンドウが開いてなければ終了
        if( nowModalSyncer == null ) return false ;

        //画面(ウィンドウ)の幅、高さを取得
        var w = $( window ).width() ;
        var h = $( window ).height() ;

        //コンテンツ(#modal-content)の幅、高さを取得
        // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
//        var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ;
//        var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ;
        var cw = $( nowModalSyncer ).outerWidth() ;
        var ch = $( nowModalSyncer ).outerHeight() ;

        //センタリングを実行する
        $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

    }

} ) ;




</script>


<br><br>

<!-- 1つ目のコンテンツ [開始] -->
<div id="modal-content-01" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p><iframe src="https://www.youtube.com/embed/aaa" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="0" width="350" height="283" size-full wp-image-117"/></p>
    <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 1つ目のコンテンツ [終了] -->

<!-- 2つ目のコンテンツ [開始] -->
<div id="modal-content-02" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p><iframe src="https://www.youtube.com/embed/bbb" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="1" width="350" height="283" size-full wp-image-118" /></p>
    <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 2つ目のコンテンツ [終了] -->

<!-- 3つ目のコンテンツ [開始] -->
<div id="modal-content-03" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p><iframe src="https://www.youtube.com/embed/ccc" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="2" width="350" height="283" size-full wp-image-119" />
</p>
    <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 3つ目のコンテンツ [終了] -->

<!-- 4つ目のコンテンツ [開始] -->
<div id="modal-content-04" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p><iframe src="https://www.youtube.com/embed/ddd" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="3" width="350" height="283" size-full wp-image-120" />
</p>
    <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>
    <!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 4つ目のコンテンツ [終了] -->




<table><tr><td>
<p><a class="modal-syncer button-link" data-target="modal-content-01"><img src="動画キャプチャ"></a></p>
</td><td>
<p><a class="modal-syncer button-link" data-target="modal-content-02"><img src="動画キャプチャ"></a></p>
</td></tr><tr><td>
<p><a class="modal-syncer button-link" data-target="modal-content-03"><img src="動画キャプチャ"></a></p>
</td><td>
<p><a class="modal-syncer button-link" data-target="modal-content-04"><img src="動画キャプチャ"></a></p>
</td></tr></table>

以上です。

ネットで調べながら書き加えていきましたので、めちゃくちゃかと思います。
「画像」「埋め込みURL」はダミーです。

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/12/21 00:52

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • yoso

    2016/12/21 01:01

    ご指摘ありがとうございます。コピペで作成しましたのでよく理解しておりません、申し訳ありませんがよろしくお願いします。

    キャンセル

回答 3

checkベストアンサー

+3

掲載されたソースコードを元に修正してみたコードを載せます。
まず、動画コンテンツ分のiframeを配置していますが、普通に<iframe src="url"></iframe>と書いてしまうと、まだ表示していないのにもかかわらず、裏ではiframe内のコンテンツのロードを行ってしまいますので、<iframe src=""></iframe>としておいたほうがいいでしょう。

また、動画コンテンツ分<iframe>を配置した場合、APIを使用しないと停止できなくなってしまいますので、iframeの配置は1つのみにし、srcを書き換えることでコンテンツの切り替えを行います。
srcを書き換えれば以前の動画はアンロードされますので以前の動画は停止(廃棄)されます。

それと、タッチイベントの設定において、for文で回してせってしていますが、jQueryでは$(".modal-syncer").click(...と書けば、modal-syncerクラスのすべての要素のクリックイベントが拾えるようになりますので、for文で回して設定する必要はありません。

下のソースコードにおいて<a>のボタンは画像ではなくcssでスタイルを設定していますので注意してください。
このソースのデモ

#modal-overlay {
  z-index: 1; 
  display: none;
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba( 255,255,255, 0.75 ); 
} 

#modal-content { 
  width: 910px; 
  height: 360px; 
  margin: 0; 
  padding: 20px 20px; 
  border: 0px solid #aaa; 
  background: #fff; 
  position: fixed; 
  /*display: none;*/ 
} 
.button-link { 
  color: #00f ; 
  text-decoration: underline; 
}

.button-link:hover { 
  cursor: pointer ; 
  color: #f00 ; 
}

.css_btn_class {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #d83526;
    padding:9px 18px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
    background-color:#fe1a00;
    color:#ffffff;
    display:inline-block;
    text-shadow:1px 1px 0px #b23e35;
     -webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;
     -moz-box-shadow:inset 1px 1px 0px 0px #f29c93;
     box-shadow:inset 1px 1px 0px 0px #f29c93;
}
.css_btn_class:hover {
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );
    background-color:#ce0100;
}
.css_btn_class:active {
    position:relative;
    top:1px;
}
<!-- モーダルウィンドウのコンテンツ開始 -->
<div id="modal-overlay">
  <div id="modal-content">
    <iframe src="" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe>
    <img src="説明文書画像" alt="0" width="350" height="283" size-full wp-image-117 />
    <a id="modal-close" class="button-link css_btn_class">閉じる</a>
  </div>
</div>
<!-- モーダルウィンドウのコンテンツ終了 -->
<table>
  <tr>
    <td>
      <a class="modal-syncer button-link css_btn_class" data-video-id="Pii-LaWOyuo">動画1</a>
    </td>
    <td>
      <a class="modal-syncer button-link css_btn_class" data-video-id="FajnnR-9mhE">動画2</a>
    </td>
  </tr>
  <tr>
    <td>
      <a class="modal-syncer button-link css_btn_class" data-video-id="OC7tgJP1D4s">動画3</a>
    </td>
    <td>
      <a class="modal-syncer button-link css_btn_class" data-video-id="OC7tgJP1D4s">動画4</a>
    </td>
  </tr>
</table>
$(function() {
  // modal-overlay内にmodal-contentを配置しているためイベントバブルにより、
  // modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる
  $("#modal-content").click(function(evt) {
    evt.stopPropagation();
  });
  //リサイズされたら、センタリングをする
  $(window).resize(centeringModalSyncer);
  //ボタンのクリック(タッチ)イベント
  $(".modal-syncer").click(function() {
    //ボタンからフォーカスを外す
    this.blur();
    //プレイヤー(iframe)のsrcにYouTube動画のURLを設定
    $("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=1");
    $("#modal-overlay").fadeIn("fast");
    // センタリング
    centeringModalSyncer();
  });
  //[#modal-overlay]、または[#modal-close]をクリックしたら…
  $("#modal-overlay, #modal-close").click(function() {
    //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
    $("#modal-overlay").fadeOut("fast", function() {
        $("#vimeoPlayer").attr("src", "");  // プレイヤーのsrcをクリア
    });
  });
  //センタリングを実行する関数
  function centeringModalSyncer() {
    //画面(ウィンドウ)の幅、高さを取得
    var w = $(window).width();
    var h = $(window).height();
    //コンテンツ(#modal-content)の幅、高さを取得
    var cw = $("#modal-content").outerWidth();
    var ch = $("#modal-content").outerHeight();
    //センタリングを実行する
    $("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) });
  }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/21 09:22

    ありがとうございます。
    希望したことが出来ました。

    そこでもう1点youtube動画横の「説明文画像」のことで困ったことがあります。
    改めて質問を投稿いたしますので良ければ、ご回答いただけるとありがたいです。
    よろしくお願いします。

    キャンセル

+1

参考元の記事のコードだと、クリックするたびにプレイヤーの要素が生成されてしまうのが原因ですね。

remove()するというのはやめて、
クリックしたらiframeのsrcをセットし、閉じたときにsrcをクリアすることで一応期待した動作を行うことは可能かと思います。

ちょっとコンパクトにしたデモを書きました。
demo

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/21 00:45

    ありがとうございます。
    大変分かりやすく書いていただいたのですが、挑戦してみましたが上手くいきません。私の説明不足もあり、お時間取らせてしまい申し訳ないです。

    現在入力しているソースコードを追記いたしました。
    wordpressでonetoneというテーマを選択し、onetone optionsのSectionと言う部分に記入し作成しています。

    もしお時間ありましたら一度ご覧いただけると嬉しいです。

    キャンセル

0

下記のように指定されていますが、WordPressの場合特殊なテーマで無い限りjQueryを指定する必要はありません。(WordPressで指定されているため)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

直接の回答ではありませんが、以下のようなYouTubeに対応したポップアップライブラリを使うのはいかがでしょうか。

【Lightcase - The smart and flexible Lightbox Plugin.】
http://cornel.bopp-art.com/lightcase/#demo

【Strip - An Unobtrusive Responsive Lightbox】
http://www.stripjs.com/

【iLightBox · Revolutionary Lightbox Plugin】
http://ilightbox.net/#video_simple

【Swipebox | A touchable jQuery lightbox】
http://brutaldesign.github.io/swipebox/#video

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/21 09:20

    ありがとうございます。

    適切なプラグインが見つからずにいましたので大変ありがたいです。
    今回は他の方が書いてくださったソースを活用いたしますので
    ベストアンサーとしてお礼が出来ないのですがありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる