YouTube動画の埋め込みiframeに対してだけアスペクト比を調整する方法

概要

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 には影響を与えることがない。