jQuery

「Magnific Popup」を使って動画やダイアログを表示させる方法

2022年1月13日 by single コメントはまだありません

「Magnific Popup」を使って動画やダイアログを表示させる方法

インストール方法

まず、「Magnific Popup」のインストール方法は以下の記事をご参照ください。

サンプル

動画

YouTubeを開く
Vimeoを開く

ダイアログ

開く（フェードズームアニメーション）
開く（フェードスライドアニメーション）
ダイアログのタイトル

こんにちは。こちらはダイアログメッセージの本文になります。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Magnific Popup Demo</title>
   <!-- Magnific Popup core CSS file -->
   <link rel="stylesheet" href="/assets/Magnific-Popup-master/dist/magnific-popup.css">
   <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
   <!-- Magnific Popup core JS file -->
   <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
   <script src="https://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=1.1.0"></script>
   <style type="text/css">
      .mfp-fade.mfp-bg {
         opacity: 0;
         -webkit-transition: all 0.15s ease-out; 
         -moz-transition: all 0.15s ease-out; 
         transition: all 0.15s ease-out;
      }
      .mfp-fade.mfp-bg.mfp-ready {
         opacity: 0.8;
      }
      .mfp-fade.mfp-bg.mfp-removing {
         opacity: 0;
      }
      .mfp-fade.mfp-wrap .mfp-content {
         opacity: 0;
         -webkit-transition: all 0.15s ease-out; 
         -moz-transition: all 0.15s ease-out; 
         transition: all 0.15s ease-out;
      }
      .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
         opacity: 1;
      }
      .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
         opacity: 0;
      }

      /* ダイアログウインドウ定義*/
      /* Styles for dialog window */
      #small-dialog {
         background: white;
         padding: 20px 30px;
         text-align: left;
         max-width: 400px;
         margin: 40px auto;
         position: relative;
      }
      /**
       * Fade-zoom animation for first dialog
       */
      /* start state */
      .my-mfp-zoom-in .zoom-anim-dialog {
         opacity: 0;
         -webkit-transition: all 0.2s ease-in-out; 
         -moz-transition: all 0.2s ease-in-out; 
         -o-transition: all 0.2s ease-in-out; 
         transition: all 0.2s ease-in-out; 
         -webkit-transform: scale(0.8); 
         -moz-transform: scale(0.8); 
         -ms-transform: scale(0.8); 
         -o-transform: scale(0.8); 
         transform: scale(0.8); 
      }

      /* animate in */
      .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
         opacity: 1;
         -webkit-transform: scale(1); 
         -moz-transform: scale(1); 
         -ms-transform: scale(1); 
         -o-transform: scale(1); 
         transform: scale(1); 
      }

      /* animate out */
      .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
         -webkit-transform: scale(0.8); 
         -moz-transform: scale(0.8); 
         -ms-transform: scale(0.8); 
         -o-transform: scale(0.8); 
         transform: scale(0.8); 
         opacity: 0;
      }

      /* Dark overlay, start state */
      .my-mfp-zoom-in.mfp-bg {
         opacity: 0;
         -webkit-transition: opacity 0.3s ease-out; 
         -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out; 
         transition: opacity 0.3s ease-out;
      }
      /* animate in */
      .my-mfp-zoom-in.mfp-ready.mfp-bg {
         opacity: 0.8;
      }
      /* animate out */
      .my-mfp-zoom-in.mfp-removing.mfp-bg {
         opacity: 0;
      }

      /**
       * Fade-move animation for second dialog
       */
      /* at start */
      .my-mfp-slide-bottom .zoom-anim-dialog {
         opacity: 0;
         -webkit-transition: all 0.2s ease-out;
         -moz-transition: all 0.2s ease-out;
         -o-transition: all 0.2s ease-out;
         transition: all 0.2s ease-out;
         -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
         -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
         -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
         -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
         transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
      }

      /* animate in */
      .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
         opacity: 1;
         -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
         -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
         -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
         -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
         transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
      }

      /* animate out */
      .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
         opacity: 0;

         -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
         -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
         -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
         -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
         transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
      }

      /* Dark overlay, start state */
      .my-mfp-slide-bottom.mfp-bg {
         opacity: 0;
         -webkit-transition: opacity 0.3s ease-out; 
         -moz-transition: opacity 0.3s ease-out; 
         -o-transition: opacity 0.3s ease-out; 
         transition: opacity 0.3s ease-out;
      }
      /* animate in */
      .my-mfp-slide-bottom.mfp-ready.mfp-bg {
         opacity: 0.8;
      }
      /* animate out */
      .my-mfp-slide-bottom.mfp-removing.mfp-bg {
         opacity: 0;
      }
   </style>
</head>
<body>
   <p>
      <h4>動画</h4>
      <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">YouTubeを開く</a><br>
      <a class="popup-vimeo" href="https://vimeo.com/45830194">Vimeoを開く</a><br>
   </p>
   <p>
      <h4>ダイアログ</h4>
         <a class="popup-with-zoom-anim" href="#small-dialog">開く（フェードズームアニメーション）</a><br>
         <a class="popup-with-move-anim" href="#small-dialog">開く（フェードスライドアニメーション）</a>
         <!-- 「mfp-hide」クラスを設定することで初期表示時非表示にする -->
         <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
            <h1>ダイアログのタイトル</h1>
            <p>
               こんにちは。こちらはダイアログメッセージの本文になります。
            </p>
         </div>
   </p>
   <script type="text/javascript">
         $(document).ready(function() {
            /* 動画の設定 */
            $('.popup-youtube, .popup-vimeo').magnificPopup({
               disableOn: 700,
               type: 'iframe',
               mainClass: 'mfp-fade',
               removalDelay: 160,
               preloader: false,
               fixedContentPos: false
            });

            /* フェードズームアニメーション*/
            $('.popup-with-zoom-anim').magnificPopup({
               type: 'inline',
               fixedContentPos: false,
               fixedBgPos: true,
               overflowY: 'auto',
               closeBtnInside: true,
               preloader: false,
               midClick: true,
               removalDelay: 300,
               mainClass: 'my-mfp-zoom-in'
            });

            /* フェードスライドアニメーション*/
            $('.popup-with-move-anim').magnificPopup({
               type: 'inline',
               fixedContentPos: false,
               fixedBgPos: true,
               overflowY: 'auto',
               closeBtnInside: true,
               preloader: false,
               midClick: true,
               removalDelay: 300,
               mainClass: 'my-mfp-slide-bottom'
            });
         });
   </script>
</body>
</html>

デモ

Iframeを使ってポップアップ形式で動画を表示させる方法

まず、Aタグに動画のリンクを設定しておきます。

      <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">YouTubeを開く</a><br>
      <a class="popup-vimeo" href="https://vimeo.com/45830194">Vimeoを開く</a><br>

次に動画をポップアップで表示させるために対象リンクにTypeに「iframe」を指定し、magnificePopupの初期化を行います。

            /* 動画の設定 */
            $('.popup-youtube, .popup-vimeo').magnificPopup({
               disableOn: 700,
               type: 'iframe',
               mainClass: 'mfp-fade',
               removalDelay: 160,
               preloader: false,
               fixedContentPos: false
            });

これだけで、簡単にポップアップで動画を表示させることができます。

Inlineでダイアログを表示させる方法

ダイアログを設定するには、まず、ダイアログ領域を設定します。

         <!-- 「mfp-hide」クラスを設定することで初期表示時非表示にする -->
         <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
            <h1>ダイアログのタイトル</h1>
            <p>
               こんにちは。こちらはダイアログメッセージの本文になります。
            </p>
         </div>

ポイントはクラスに「mpf-hide」を設定することです。これがないと、初期表示時、普通にダイアログが表示されて暇います。

次にmagnificePopupを初期化するだけで、ダイアログを設定できます。

            /* フェードズームアニメーション*/
            $('.popup-with-zoom-anim').magnificPopup({
               type: 'inline',
               fixedContentPos: false,
               fixedBgPos: true,
               overflowY: 'auto',
               closeBtnInside: true,
               preloader: false,
               midClick: true,
               removalDelay: 300,
               mainClass: 'my-mfp-zoom-in'
            });

            /* フェードスライドアニメーション*/
            $('.popup-with-move-anim').magnificPopup({
               type: 'inline',
               fixedContentPos: false,
               fixedBgPos: true,
               overflowY: 'auto',
               closeBtnInside: true,
               preloader: false,
               midClick: true,
               removalDelay: 300,
               mainClass: 'my-mfp-slide-bottom'
            });

オプションの「mainClass」を変更することで、効果（エフェクト）を設定することもできます。

以上、ご参考まで。