概要
公式の手順でiframeの埋め込みYouTube動画をWEBサイトに表示させ、レスポンシブ対応させる方法を紹介。用途
- 簡単にYouTube動画をWEBサイトに表示させる。
- iframeで表示。
- レスポンシブに対応。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装方法
- 対象動画のページを開く。
- 再生画面下の[共有]をクリック。
- ポップアップ内右下の[埋め込む]をクリック。
- <iframe>を全てコピーする（埋め込みオプションは任意で設定）。
- レスポンシブ対応は下記ソースコードを参照。
HTML
<div class="c-movie"><!-- 任意のタグでiframeを囲う -->
<iframe src="https://www.youtube.com/embed/gW89w53dSfI" allowfullscreen></iframe>
<!-- width,heightは削除 -->
<!-- frameborder属性はHTML5で廃止であるため、frameborder="0" は削除する。cssに border: none; を記述して枠線を消す-->
</div>
SCSS
.c-movie {
position: relative;
padding-top: 56.25%; //アスペクト比16:9の場合
iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border: none; //枠線を消す
}
}
CSS
.c-movie {
position: relative;
padding-top: 56.25%;
}
.c-movie iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
