html_css:embed_youtube_media_responsive

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 を適用する。

<div class="youtube">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/kljxDBRvhe4" frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

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

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

激しいサンプル😅


ともやん再生リスト🤤


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


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


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

埋込用 URL(https://www.youtube.com/embed/<id>) で <iframe> に埋め込めば問題ない。

  • html_css/embed_youtube_media_responsive.txt
  • 最終更新: 2023/03/14 06:16
  • by ともやん