modaal.jsを使って複数のYouTube動画をモーダル表示する方法｜DAD UNION

modaal.jsを使って複数のYouTube動画をモーダル表示する方法をご紹介します。
リンククリックでYouTubeの埋め込み動画（iframe）をモーダル表示します。

Contents

modaal.jsを使って複数のYouTube動画をモーダル表示するCSS記述
modaal.jsを使って複数のYouTube動画をモーダル表示するHTML記述
modaal.jsを使って複数のYouTube動画をモーダル表示するJavaScriptの記述
modaal.jsを使って複数のYouTube動画をモーダル表示するデモページ

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>