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

Magnific PopupでYoutube動画をポップアップで表示する方法を解説します。Magnific Popupを用いるとYoutube動画をポップアップで表示することができます。これで動画紹介などでユーザを惹きつけることができます。

コンテンツ [表示]

  1. 1Magnific PopupでYoutube動画をポップアップで表示したい
  2. 2Magnific PopupでYoutube動画をポップアップで表示する方法
  3. 2.1解説
  4. 2.2自動再生させる方法
  5. 3まとめ

Magnific PopupでYoutube動画をポップアップで表示したい

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

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

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

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

Photo by200degrees

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

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

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

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

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

解説

HTML

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

<a href="https://www.youtube.com/watch?v=動画のID" class="任意のクラス名">

CSS

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

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

あわせて読みたい
Magnific Popupの使い方をサンプルコード付きで解説!のイメージ
Magnific Popupの使い方をサンプルコード付きで解説!
Magnific Popupの使い方をサンプルコード付きで解説します。Magnific Popupの使うことで簡単にレスポンシブに対応したポップアップウインドウ(モーダルウインドウ)を作成することができます。

jQuery

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

そしてtypeiframeとしてください。

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

自動再生させる方法

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

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

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

自動再生させる方法
自動再生させる方法についてのコードが載っています。

まとめ

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

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

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

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次