素人ですがwordpressでホームページを作成しております。
動画ギャラリーとして、複数の動画のキャプチャ画像を並べ
クリックすると それぞれのモダールウインドウが開きその中に
「iframeでyoutubeの埋め込み+説明文書画像」が並んで表示されるよう
こちらで助けていただきjqueryを使用し作成しました。
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>
// 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) }); } });
上記だと、動画はそれぞれ別のものが再生されますが
「説明文書画像」が同じものが常に表示されます。
もちろん原因はわかるのですが
・それぞれに個々の「説明文書画像」を表示させたいときはどのようにすればよいでしょうか?
「プレイヤー(iframe)のsrcにYouTube動画のURLを設定」と同様に設定すべきことは理解できるのですが
どうしても画像が表示されません。可能であれば、実際に追記すべき内容をご教授いただけませんでしょうか。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/21 03:40 編集
2016/12/21 03:28 編集
2016/12/21 03:40 編集
2016/12/21 03:58
2016/12/21 04:07