Magnific PopupでYoutube動画をポップアップで表示する方法！

Magnific Popupの使い方を工夫して、Youtube動画をポップアップで表示して、ユーザを惹きつけたいというときがあります。

HTMLのみだとiframeを用いてYoutube動画の埋め込みのみなのに対して、Magnific Popupを用いるとポップアップで再生することができます。

また閉じるボタンもMagnific Popupを用いるとデフォルトでついてくるので、不要になったら閉じることができます。

では以下の項目で方法について見ていきましょう。

ではまず普通にMagnific PopupでYoutube動画をポップアップで表示する方法について見ていきましょう。

ではサンプルコードを用いて挙動を見てみましょう。後にサンプルコードの解説を行います。
 

このように「YouTube動画」をクリックすると、ポップアップでYouTube動画が見れることが分かります。

ではサンプルコードの解説を行います。

YouTube動画を載せたい部分のコードを以下のようにしてください。class名は適当でいいです。

CSSではアニメーション(フェード)してYouTube動画がポップアップされるように設定しています。

詳しくは以下の記事で書いているので、ぜひ見てみてください。

jQueryではHTMLで付与した任意のクラスに対して、magnificPopupメソッドを用います。

そしてtypeはiframeとしてください。

これだけでYoutube動画をポップアップで表示することができます。

サンプルコードで紹介した方法では、毎回Playボタンを押さないと再生されません。
これをポップアップされた時に自動で再生させるようにしたいという時があります。

これにはMagnific Popupのオプションを用いつつ、少し複雑なコードが必要でここでは解説しきれないので、代わりに以下の自動再生させるコードが載っているページを載せておきます。

ぜひ参照して自動再生させてみてください。

いかがでしたでしょうか？

Magnific Popupの使い方を工夫することで、YouTube動画以外にも様々なものをポップアップとして表示させることができます。

ぜひここで紹介した方法を用いて、Youtube動画をポップアップで表示させてみてください。