YouTube 動画をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。
HTML
補足
- div id="data-youtube" 内に埋め込みコードを記述し、次に２点を変更します。
- 埋め込みコードの "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" は非表示にしています。