概要
公式の手順でYouTube動画をWEBサイトに表示させる方法、およびCSSのaspect-ratioプロパティを使用してレスポンシブ対応する方法を紹介。用途
- 簡単にYouTube動画をWEBサイトに表示させる。
- iframeで表示。
- レスポンシブ対応。CSSの aspect-ratio プロパティを使用。
- 主要モダンブラウザのみ対応（IE非対応）。ブラウザ対応状況はこちら（Can I use）。
- IE対応の場合は、こちらの記事を参照。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
実装方法
- 対象動画のページを開く。
- 再生画面下の[共有]をクリック。
- ポップアップ内右下の[埋め込む]をクリック。
- <iframe>を全てコピーする（埋め込みオプションは任意で設定）。
- レスポンシブ対応は下記ソースコードを参照。
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
