modaal.jsを使って複数のYouTube動画をモーダル表示する方法をご紹介します。
リンククリックでYouTubeの埋め込み動画(iframe)をモーダル表示します。
modaal.jsを使って複数のYouTube動画をモーダル表示するCSS記述
※modaal.min.cssファイルを読み込みます。モーダルエリア(#modalarea)とモーダル表示時(.modaal-container)幅やcloseボタン(.modaal-close)のCSS記述です。必要に応じて変更して下さい。
<link rel="stylesheet" type="text/css" href="modaal.min.css"> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding-top: 20px; } p{ padding-bottom: 10px; font-size: 18px; } .modalarea{ display: none; } .modaal-container{ max-width: 90%; text-align: center; } .modaal-close:after, .modaal-close:before{ background:#ccc; } .modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before{ background:#333; } </style>
modaal.jsを使って複数のYouTube動画をモーダル表示するHTML記述
※モーダルエリア(class=”modalarea”)とモーダル表示用リンク(class=”modal”)を2箇所用意します。
<h1>modaal.jsを使って複数のYouTube動画をモーダル表示</h1> <p>以下のリンクをクリックするとYouTubeの埋め込み動画(iframe)をモーダル表示します。</p> <div><a href="#yt1" class="modal">YouTube動画をモーダル表示1</a></div> <br> <div><a href="#yt2" class="modal">YouTube動画をモーダル表示2</a></div> <div id="yt1" class="modalarea"></div> <div id="yt2" class="modalarea"></div>
modaal.jsを使って複数のYouTube動画をモーダル表示するJavaScriptの記述
※jquery.min.js(v1.11.2)、modaal.min.jsファイルを読み込みます。$(“モーダル表示トリガーリンクclass”).modaal({オプション})を記述します。オプションのモーダル表示時の処理(before_open)時にモーダル表示ターゲットidを取得しターゲットidによってYouTube埋め込み動画(iframe)をモーダルエリアに表示します。 モーダルclose時の処理(before_open)時にモーダルエリアのYouTube埋め込み動画(iframe)を削除します。
<script src="jquery.js"></script> <script src="modaal.min.js"></script> <script type="text/javascript"> $(function(){ $(".modal").modaal({ start_open:false, overlay_close:true, before_open:function(){ //モーダル表示時の処理 var ss = JSON.parse(JSON.stringify($(this).attr("scope"))).source; //モーダル表示ターゲットidを取得 //モーダル表示ターゲットidによってYouTube埋め込み動画(iframe)をモーダルエリアに表示 if(ss == "#yt1"){ $('#yt1').html('<iframe width="100%" height="490" src="https://www.youtube.com/embed/d5VXB-UxTiE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'); }else if(ss == "#yt2"){ $('#yt2').html('<iframe width="100%" height="490" src="https://www.youtube.com/embed/yyCVaP2xhAU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'); } $('html').css('overflow-y','hidden'); }, after_close:function(){ //モーダルclose時の処理 $('#yt1,#yt2').html(''); //モーダルエリアのYouTube埋め込み動画(iframe)を削除 $('html').css('overflow-y','scroll'); } }); }); </script>
modaal.jsを使って複数のYouTube動画をモーダル表示するデモページ
modaal.jsを使って複数のYouTube動画をモーダル表示するデモページ
参考ページ:modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定する方法
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。