縦横比を維持したまま横幅いっぱいに YouTube 動画を表示する方法を紹介します。
HTML
補足
- YouTube 動画の埋め込みコードを二重の div 要素内に記述します（外側の div 要素には frame-youtube クラスを付ける）。
- YouTube 動画の埋め込みコードは書き換えずに、そのまま div 要素内に貼り付ける。
- 埋め込みコードの width とheight の値は無視されるので、気にしなくて良い。
CSS
補足
- 将来、YouTube 動画の仕様が変わったら padding-bottom: 56.25% や padding-top: 30px の値が変わるかも知れません。