JavaScript

modaal.jsで簡単にYouTube動画をモーダル表示する方法

  /

今回は、modaal.jsを使用して複数のYouTube動画をモーダルウィンドウで表示する方法をご紹介します。モーダルウィンドウとは、クリックすると画面上にポップアップで表示されるウィンドウのことです。以下では、CSS、HTML、JavaScriptのコードを順に解説しながら実装方法を詳しく説明します。

Contents

CSSの記述

まず、modaal.jsのスタイルシートを読み込み、モーダルウィンドウの見た目を調整する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>

　
このCSSでは、基本的なフォントサイズやテキストの配置を設定し、モーダルウィンドウのスタイルを調整しています。

HTMLの記述

次に、HTMLのマークアップを見ていきます。YouTube動画をモーダル表示するためのリンクとモーダルエリアを作成します。
モーダルエリア（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>

　
このHTMLコードでは、モーダル表示用のリンクを2つ用意し、それぞれがクリックされると対応するモーダルエリアが表示されるようになっています。

JavaScriptの記述

最後に、JavaScriptを使ってmodaal.jsを初期化し、モーダルウィンドウにYouTube動画を表示する処理を実装します。
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>

　
このスクリプトは、jQueryとmodaal.jsを読み込み、リンクがクリックされた際にモーダルウィンドウを表示する処理を設定します。また、モーダルウィンドウを閉じた際には、埋め込まれていたYouTube動画を削除し、スクロールバーの表示を元に戻します。

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

実際の動作を確認するためのデモページを用意しました。以下のリンクから確認できます。

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

参考ページ：modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定する方法

まとめ

今回の記事では、modaal.jsを使って複数のYouTube動画をモーダルウィンドウで表示する方法について詳しく解説しました。CSSでスタイルを設定し、HTMLでマークアップを行い、JavaScriptで動作を実装することで、簡単にモーダルウィンドウを作成できます。ぜひ、自分のプロジェクトでも活用してみてください。

モーダルウィンドウを使用することで、ページを離れることなく動画を表示できるため、ユーザーエクスペリエンスの向上にもつながります。また、他のメディアコンテンツにも応用できるので、幅広い用途で活用できるでしょう。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

モーダル modaal.js YouTube埋込動画
関連記事