概要
YouTube 動画をサイトに埋め込む際、スマホサイズにも対応するため、CSS を調整する必要があった。
実装方法
埋め込み HTML の記述
YouTube の埋め込み HTML は以下の通り。
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XXXXXXXX"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
「プライバシー強化モードを有効にする」を有効にした場合は以下の通り。
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/XXXXXXXX"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
srcに含まれるドメインは、通常はwww.youtube.comだが、プライバシー強化モードの場合はwww.youtube-nocookie.comになる。
YouTube の iframe 要素に対して、aspect-ratio プロパティで比率を指定する
iframe 要素に対して、aspect-ratio プロパティで比率を指定する（今回は 16:9 の比率を指定）。
/* `src` の値に `youtube`が含まれているか */
iframe[src*="youtube"] {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
これにより、YouTube 動画の埋め込み iframe に対してのみ、aspect-ratio プロパティを適用させることができ、それ以外の iframe には影響を与えることがない。