【html – iframe】Youtubeの埋め込みをきれいに表示する

2019-04-14 13:09

Youtubeを埋め込みたい時のやり方を紹介します。Youtubeを組み込むことでwebサイトが華やかになりますね。

iframeでの組み込み方
よりレスポンシブデザインでのきれいなcss

Youtubeはこちら:https://www.youtube.com/

iframeでの組み込み方

① youtubeで埋め込みたい動画を開きます。
② 「共有」をクリック
③ 「<埋め込む>」をクリックします。
④ ソースコードをコピペ
⑤ このままだとwidth=560にされてしまっているので必要なサイズに調整しましょう。
⑥ レスポンシブデザイン用のCSSは下記へ

レスポンシブデザインでのきれいなcss

iframeを埋め込むことでレスポンシブデザインが難しくなります。widthを流動的にすることでうまくheightがついてこないという問題が生じてしまいます。

<!-- htmlはこちら -->
<div class="txt_center player">
<iframe src="https://www.youtube.com/embed/t2nTZrPQFFc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

/* CSSはこちら */
.player {
position: relative;
height: 0;
padding-bottom: 56.25%;
margin-bottom:40px;
}
.player iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

パラメーターでさらにカスタマイズ

YouTube公式パラメーター:https://developers.google.com/youtube/player_parameters?hl=ja
・開始位置の変更
・ボタンやタイトルなどの表示/非表示
・動画の自動再生の設定
など、様々なカスタムが可能です。