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

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

@media (max-width: 680px) {
    .youtube {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }
    .youtube iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
    }
}
@media (min-width: 900px) {
    .youtube 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 の利用をお勧めします。

ともやん再生リスト🤤

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

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