Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
素人ですがwordpressでホームページを作成しております。
動画ギャラリーとして、動画のキャプチャ画像をクリックすると
モダールウインドウが開きその中に
「iframeでyoutubeの埋め込み＋説明」が表示されるようjqueryを使用し作成しました。
見た目は問題ないのですが、
１、モダールウインドウを閉じても音声が消えない（動画も再生され続けているよう）
２、別の動画を再生すると音声が二重で流れる
ことに困っています。
http://www.webdesignleaves.com/wp/jquery/625/
上記等を参考にし.remove();を用いてみたのですが
モダールウインドウを閉じると同時にyoutubeが終了（youtubeの埋め込み自体が消える）ため音声は消えますが、
再び同じ動画を見ようとモダールウインドウを開いてもyoutubeの埋め込みが非表示となり２回目の閲覧ができません。
・モダールウインドウを閉じると同時に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」はダミーです。
よろしくお願いいたします。
回答3件
0
ベストアンサー
掲載されたソースコードを元に修正してみたコードを載せます。
まず、動画コンテンツ分のiframeを配置していますが、普通に<iframe src="url"></iframe>と書いてしまうと、まだ表示していないのにもかかわらず、裏ではiframe内のコンテンツのロードを行ってしまいますので、<iframe src=""></iframe>としておいたほうがいいでしょう。
また、動画コンテンツ分<iframe>を配置した場合、APIを使用しないと停止できなくなってしまいますので、iframeの配置は１つのみにし、srcを書き換えることでコンテンツの切り替えを行います。
srcを書き換えれば以前の動画はアンロードされますので以前の動画は停止(廃棄)されます。
それと、タッチイベントの設定において、for文で回してせってしていますが、jQueryでは$(".modal-syncer").click(...と書けば、modal-syncerクラスのすべての要素のクリックイベントが拾えるようになりますので、for文で回して設定する必要はありません。
下のソースコードにおいて<a>のボタンは画像ではなくcssでスタイルを設定していますので注意してください。
このソースのデモ
css
1#modal-overlay { 2 z-index: 1; 3 display: none; 4 position: fixed; 5 top: 0; 6 left: 0; 7 width: 100%; 8 height: 100%; 9 background-color: rgba( 255,255,255, 0.75 ); 10} 11 12#modal-content { 13 width: 910px; 14 height: 360px; 15 margin: 0; 16 padding: 20px 20px; 17 border: 0px solid #aaa; 18 background: #fff; 19 position: fixed; 20 /*display: none;*/ 21} 22.button-link { 23 color: #00f ; 24 text-decoration: underline; 25} 26 27.button-link:hover { 28 cursor: pointer ; 29 color: #f00 ; 30} 31 32.css_btn_class { 33 font-size:16px; 34 font-family:Arial; 35 font-weight:normal; 36 -moz-border-radius:8px; 37 -webkit-border-radius:8px; 38 border-radius:8px; 39 border:1px solid #d83526; 40 padding:9px 18px; 41 text-decoration:none; 42 background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% ); 43 background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% ); 44 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100'); 45 background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) ); 46 background-color:#fe1a00; 47 color:#ffffff; 48 display:inline-block; 49 text-shadow:1px 1px 0px #b23e35; 50 -webkit-box-shadow:inset 1px 1px 0px 0px #f29c93; 51 -moz-box-shadow:inset 1px 1px 0px 0px #f29c93; 52 box-shadow:inset 1px 1px 0px 0px #f29c93; 53} 54.css_btn_class:hover { 55 background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% ); 56 background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% ); 57 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00'); 58 background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) ); 59 background-color:#ce0100; 60} 61.css_btn_class:active { 62 position:relative; 63 top:1px; 64}
html
1<!-- モーダルウィンドウのコンテンツ開始 --> 2<div id="modal-overlay"> 3 <div id="modal-content"> 4 <iframe src="" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe> 5 <img src="説明文書画像" alt="0" width="350" height="283" size-full wp-image-117 /> 6 <a id="modal-close" class="button-link css_btn_class">閉じる</a> 7 </div> 8</div> 9<!-- モーダルウィンドウのコンテンツ終了 --> 10<table> 11 <tr> 12 <td> 13 <a class="modal-syncer button-link css_btn_class" data-video-id="Pii-LaWOyuo">動画１</a> 14 </td> 15 <td> 16 <a class="modal-syncer button-link css_btn_class" data-video-id="FajnnR-9mhE">動画２</a> 17 </td> 18 </tr> 19 <tr> 20 <td> 21 <a class="modal-syncer button-link css_btn_class" data-video-id="OC7tgJP1D4s">動画３</a> 22 </td> 23 <td> 24 <a class="modal-syncer button-link css_btn_class" data-video-id="OC7tgJP1D4s">動画４</a> 25 </td> 26 </tr> 27</table>
js
1$(function() { 2 // modal-overlay内にmodal-contentを配置しているためイベントバブルにより、 3 // modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる 4 $("#modal-content").click(function(evt) { 5 evt.stopPropagation(); 6 }); 7 //リサイズされたら、センタリングをする 8 $(window).resize(centeringModalSyncer); 9 //ボタンのクリック(タッチ)イベント 10 $(".modal-syncer").click(function() { 11 //ボタンからフォーカスを外す 12 this.blur(); 13 //プレイヤー(iframe)のsrcにYouTube動画のURLを設定 14 $("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=1"); 15 $("#modal-overlay").fadeIn("fast"); 16 // センタリング 17 centeringModalSyncer(); 18 }); 19 //[#modal-overlay]、または[#modal-close]をクリックしたら… 20 $("#modal-overlay, #modal-close").click(function() { 21 //[#modal-content]と[#modal-overlay]をフェードアウトした後に… 22 $("#modal-overlay").fadeOut("fast", function() { 23 $("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア 24 }); 25 }); 26 //センタリングを実行する関数 27 function centeringModalSyncer() { 28 //画面(ウィンドウ)の幅、高さを取得 29 var w = $(window).width(); 30 var h = $(window).height(); 31 //コンテンツ(#modal-content)の幅、高さを取得 32 var cw = $("#modal-content").outerWidth(); 33 var ch = $("#modal-content").outerHeight(); 34 //センタリングを実行する 35 $("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) }); 36 } 37});
投稿2016/12/20 18:59
総合スコア4267
ありがとうございます。
希望したことが出来ました。
そこでもう１点youtube動画横の「説明文画像」のことで困ったことがあります。
改めて質問を投稿いたしますので良ければ、ご回答いただけるとありがたいです。
よろしくお願いします。
0
参考元の記事のコードだと、クリックするたびにプレイヤーの要素が生成されてしまうのが原因ですね。
remove()するというのはやめて、
クリックしたらiframeのsrcをセットし、閉じたときにsrcをクリアすることで一応期待した動作を行うことは可能かと思います。
ちょっとコンパクトにしたデモを書きました。
demo
投稿2016/12/20 14:06
総合スコア4267
ありがとうございます。
大変分かりやすく書いていただいたのですが、挑戦してみましたが上手くいきません。私の説明不足もあり、お時間取らせてしまい申し訳ないです。
現在入力しているソースコードを追記いたしました。
wordpressでonetoneというテーマを選択し、onetone optionsのSectionと言う部分に記入し作成しています。
もしお時間ありましたら一度ご覧いただけると嬉しいです。
0
下記のように指定されていますが、WordPressの場合特殊なテーマで無い限りjQueryを指定する必要はありません。（WordPressで指定されているため）
HTML
1<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/20 17:32
総合スコア69398
ありがとうございます。
適切なプラグインが見つからずにいましたので大変ありがたいです。
今回は他の方が書いてくださったソースを活用いたしますので
ベストアンサーとしてお礼が出来ないのですがありがとうございました。
あなたの回答
tips
プレビュー
