【jQuery】YouTubeをモーダル表示させるなら「Magnific Popup」[IE9対応]

uXwgkrv9hDW65xdw

YouTubeをモーダルウィンドウで表示させたいときは、jQueryプラグイン Magnific Popup が便利です。

下記メリットがあり、設置も簡単。

  • YouTubeのページURLをリンクに指定するだけ
  • 埋め込み用 iframe をHTMLに書いておく必要がない
  • モーダルウィンドウを表示すると同時に、動画を再生してくれる
  • CDN が用意されている

目次

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan
  • iOS 9
  • Android 5 / 6

 

要点とコード

code

CDNからjQueryを読み込み、専用CSSも読み込んで、専用メソッドを指定するだけ。

 

magnific-popup.css に、オーバーレイのフェードを追加(公式サイトからコピペ)。

 

    • このエントリーをはてなブックマークに追加