YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法

メディアクエリ は画面の解像度(例えばスマートフォンの画面とコンピュータの画面)といった条件に対応してコンテンツの描画が行えるようにする CSS3 のモジュールである。2012年6月には W3C勧告 になり、レスポンシブウェブデザイン(RWD) の基礎になっている。
メディアクエリ - Wikipedia より

.youtube {
  @media (max-width: 680px) {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
 
    iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }
  }
  @media (min-width: 900px) {
    iframe {
      width: 560;
      height: 315;
    }
  }
}

※画面幅(width)が 680px 以下の場合はスマホ向けの CSS を適用する。
※padding-top を 56.25% に設定する理由は、HD動画(16:9)の場合 100 / 16 * 9 = 56.25% となるからである。
※!important は iframe のサイズを無視して CSS のサイズ 100% を優先する。
※画面幅(width)が 900px 以上の場合は PC 向けの CSS を適用する。

ブラウザーの横幅を 680px 以下のに縮めていくと、YouTube 動画の幅が 100% に切り替わる。

YouTube を広告なしで見るには Brave - プライバシーを重視した高速かつ安全な次世代ブラウザ の利用をお勧めします。
※モバイルやスマホで余計な通信容量(ギガ)を消費しないように見るためにも Brave の利用をお勧めします。

我が家のブラ男氏🐶トイプードル🐩当時15歳サンプル😅

激しいサンプル😅

ともやん再生リスト🤤

世界で人気のミュージック ビデオ トップ 100

量子コンピュータを説明する - 人類の技術の限界について

視聴用 URL(https://www.youtube.com/watch?v=<id>) で <iframe> に埋め込むと、以下のように接続が拒否される。

Youtubeの埋め込み動画をCSSでレスポンシブ対応し縦横の比率を保ったまま伸縮させる方法 | WEB帳
メディアクエリで画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About