![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDd2KUund2c73AJSiPaSAxA3qg0bjRO9Dtzz-lcXZQQAGyBn_HxTJAFXjOK6bDK7l3V04BpDKD_ClEpHRzkxQeWtqMnIR6CXnpyCqg6vd5YzLaUDQ8qLBu-wbv29uDdSyZZ4_roJiJepE/s1600/SnapCrab_YouTube+%25E5%258B%2595%25E7%2594%25BB%25E3%2582%2592%25E3%2583%25A2%25E3%2583%25BC%25E3%2583%2580%25E3%2583%25AB%25E3%2583%25BB%25E3%2582%25A6%25E3%2582%25A3%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A6%25E3%2581%25AB%25E8%25A1%25A8%25E7%25A4%25BA+-+Google+Chrome_2017-3-7_9-6-30_No-00.png)
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" は非表示にしています。