質問: 素人ですがwordpressでホームページを作成しております。 動画ギャラリーとして、動画のキャプチャ画像をクリックすると モダールウインドウが開きその中に 「iframeでyoutubeの埋め込み+説明」が表示されるようjqueryを使用し作成しました。 見た目は問題ないのですが、 1、モダールウインドウを閉じても音声が消えない(動画も再生され続けているよう) 2、別の動画を再生すると音声が二重で流れる ことに困っています。 http://www.webdesignleaves.com/wp/jquery/625/ 上記等を参考にし.remove();を用いてみたのですが モダールウインドウを閉じると同時にyoutubeが終了(youtubeの埋め込み自体が消える)ため音声は消えますが、 再び同じ動画を見ようとモダールウインドウを開いてもyoutubeの埋め込みが非表示となり2回目の閲覧ができません。 ・モダールウインドウを閉じると同時にyoutubeの再生を停止する もしくは ・別の動画が流れ出した時点で、先に流れていた動画を停止する 方法がありましたらご教授下さい。 【現在のソースコード】 ``` ``` 以上です。 ネットで調べながら書き加えていきましたので、めちゃくちゃかと思います。 「画像」「埋め込みURL」はダミーです。 よろしくお願いいたします。
回答: 掲載されたソースコードを元に修正してみたコードを載せます。 まず、動画コンテンツ分のiframeを配置していますが、普通にと書いてしまうと、まだ表示していないのにもかかわらず、裏ではiframe内のコンテンツのロードを行ってしまいますので、としておいたほうがいいでしょう。 また、動画コンテンツ分を配置した場合、APIを使用しないと停止できなくなってしまいますので、iframeの配置は1つのみにし、srcを書き換えることでコンテンツの切り替えを行います。 srcを書き換えれば以前の動画はアンロードされますので以前の動画は停止(廃棄)されます。 それと、タッチイベントの設定において、for文で回してせってしていますが、jQueryでは$(".modal-syncer").click(...と書けば、modal-syncerクラスのすべての要素のクリックイベントが拾えるようになりますので、for文で回して設定する必要はありません。 下のソースコードにおいてのボタンは画像ではなく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; } ``` ``` 閉じる 動画1 動画2 動画3 動画4 ``` ``` $(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) }); } }); ```