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

2 min read

概要

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

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連