====== YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法 ======
===== メディアクエリ(Media Queries) =====
**メディアクエリ** は画面の解像度(例えばスマートフォンの画面とコンピュータの画面)といった条件に対応してコンテンツの描画が行えるようにする CSS3 のモジュールである。2012年6月には [[https://ja.wikipedia.org/wiki/W3C%E5%8B%A7%E5%91%8A|W3C勧告]] になり、[[https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3|レスポンシブウェブデザイン(RWD)]] の基礎になっている。\\
[[https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA|メディアクエリ - Wikipedia]] より\\
===== CSS の内容 =====
.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 を適用する。\\
===== HTML の内容 =====
===== サンプル =====
ブラウザーの横幅を **680px** 以下のに縮めていくと、YouTube 動画の幅が 100% に切り替わる。\\
\\
YouTube を広告なしで見るには [[web:brave|Brave - プライバシーを重視した高速かつ安全な次世代ブラウザ]] の利用をお勧めします。\\
**※モバイルやスマホで余計な通信容量(ギガ)を消費しないように見るためにも [[web:brave|Brave]] の利用をお勧めします。**\\
\\
**激しいサンプル😅**
\\
**ともやん再生リスト🤤**\\
\\
**世界で人気のミュージック ビデオ トップ 100**\\
\\
**量子コンピュータを説明する - 人類の技術の限界について**\\
\\
===== トラブルシューティング =====
==== www.youtube.com で接続が拒否されました。 ====
視聴用 URL(**https://www.youtube.com/watch?v=**) で **