MagnificPopupでYoutubeの動画を流してみた

 

今回やりたいこと

 

画像をクリックしたらモーダルウインドウでYoutubeの動画を流す

これがやりたくてですね…。

 

その他要望

 

「画像をクリックしたらモーダルウインドウでYoutubeの動画を流す」以外の要望としては、

  • モーダルウインドウ自体がシンプルでスタイリッシュな感じ
  • 背景自体に薄い黒背景がかかるような感じ
  • jQueryのプラグイン使いたいよね〜

です。

 

一度、一からプラグインを使わずにモーダルウインドウ作りましたが、面倒くさいことこの上ないですし、デザイン性にも欠けていたので先人たちが丹精込めて作ってくださったjQueryのプラグイン様様です。

 

MagnificPopupを使ってYoutubeをモーダルウインドウで流しますよ!

 

MagnificPopup

 

今回いろんなjQueryを見比べた結果、1番シンプルでスタイリッシュな実装ができそうなのがMagnificPopupでした。
MagnificPopupはこちらからダウンロードできます。

 

MagnificPopupの使い方

 

MagnificPopupの使い方はかんたんです。

ダウンロードしてきたら、head内で

の3つのファイルを読み込みます。

 

読み込んだら、

このように、モーダルウインドウで表示したいYoutubeの動画URLを埋め込んでいる<a>タグにクラスをつけて、そのクラスを<script>タグ内で下のように指定してMagnificPopupを使うようにするだけです。

 

ほら、かんたんでしょ?

 

とか言いつつ、最初全然動かなくってずっとヒーヒー言ってました。

その原因はまた別の機会に書きます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です