YouTube動画等 iframe埋め込みのレスポンシブ対応

スポンサーリンク
スポンサーリンク

動画の埋め込みをレスポンシブ対応する方法

●動画の埋め込み

YouTubeの埋め込みたい動画URLへ移動

動画下の共有から「埋め込む」を選択

ポップアップが表示されるので、右下の「コピー」をクリックしてコードをコピー

以下の内容を埋め込みたい場所に記述

 

<div class="youtube">
>>>コピーした「動画の埋め込みのコード」をここにペースト<<<
</div>

 

CSSの設定

aspect-ratio を使用

.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}

 

Youtube動画の比率 16:9 を「16 / 9」を指定。

 

padding-top ハックを使用

※aspect-ratio未対応の環境用

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

 

※親要素のサイズいっぱいに表示されるため、大きすぎる場合はさらに「div」などで囲って幅や位置の調整が必要です。

 

関連動画を表示

YouTube の動画埋め込みで表示される関連動画や次の動画を非表示にする方法を紹介します。

以前は youtube パラメーターに ?rel=0 を指定することで、関連動画を非表示にすることができましたが、2018年9月以降の YouTube の仕様変更により、動画再生後の関連動画表示・非表示の制御ができなくなりました。

現在は、パラメーターの値によって次の動作をします。

0 の場合 ?rel=0

動画をアップしたチャンネル内から関連動画表示

1 の場合 ?rel=1

外部のチャンネルから関連動画を表示

スポンサーリンク
WEB
スポンサーリンク
kotonaraをフォローする
コトナラ
タイトルとURLをコピーしました