2017年3月7日

YouTube 動画をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

  • div id="data-youtube" 内に埋め込みコードを記述し、次に2点を変更します。
  • 埋め込みコードの "src" を "data-src" に変更します。
  • 埋め込みコードに src="about:blank" を追加します。
  • 尚、div id="data-youtube" は CSS で非表示にしています。

jQuery

補足

  • div id="load-data-youtube" がクリックされたら、モーダル・ウィンドウにクラス YOUTUBE を付加します。
  • div id="data-youtube" 内の埋め込みコードをモーダル・ウィンドウのコンテナにコピーします。
  • コピーした埋め込みコードの data-src の値を src の値にセットします(ここで初めて YouTube 動画のデータがロードされます)。続いて、モーダル・ウィンドウを表示します。

CSS

補足

  • クラス YOUTUBE が付加されたモーダル・ウィンドウのコンテナは、背景が透過されるように設定しています。また、スクロール・バーが表示されてしまうので overflow: hidden を設定しています。
  • コンテナ内にコピーされた iframe の幅と高さは、コンテナと同じ大きさになるように 100% を設定しています。
  • あらかじめ埋め込みコードを記述した div id="data-youtube" は非表示にしています。

サンプル

関連記事