html_css:embed_youtube_media_responsive [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 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 の内容 =====
<code 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;
    }
  }
}
</code>
※画面幅(width)が **680px** 以下の場合はスマホ向けの CSS を適用する。\\
※**padding-top** を 56.25% に設定する理由は、HD動画(16:9)の場合 100 / 16 * 9 = 56.25% となるからである。\\
※**!important** は iframe のサイズを無視して CSS のサイズ 100% を優先する。\\
※画面幅(width)が **900px** 以上の場合は PC 向けの CSS を適用する。\\

===== HTML の内容 =====
<WRAP prewrap 100%>
<code html>
<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>
</code>
</WRAP>

===== サンプル =====
ブラウザーの横幅を **680px** 以下のに縮めていくと、YouTube 動画の幅が 100% に切り替わる。\\
\\
YouTube を広告なしで見るには [[web:brave|Brave - プライバシーを重視した高速かつ安全な次世代ブラウザ]] の利用をお勧めします。\\
**※モバイルやスマホで余計な通信容量(ギガ)を消費しないように見るためにも [[web:brave|Brave]] の利用をお勧めします。**\\
\\
**我が家のブラ男氏🐶トイプードル🐩当時15歳サンプル😅**
<WRAP youtube><html>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WCc6cgn7kEQ" title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</html></WRAP>\\

**激しいサンプル😅**
<WRAP youtube><html>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTtiY9UZPHeVHtae5qQRB_VY" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</html></WRAP>\\

**ともやん再生リスト🤤**\\
<WRAP group 100%>
<WRAP left column youtube><html>
  <iframe width="300" height="240" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTvXrAKuRqiNBjmhouN0M1v7" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</html></WRAP>
<WRAP left column youtube><html>
  <iframe width="300" height="240" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTtdlWOPo0mNu1kVxgbKn0Y1" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</html></WRAP>
</WRAP>\\

**世界で人気のミュージック ビデオ トップ 100**\\
<WRAP youtube><html>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL4fGSI1pDJn5kI81J1fYWK5eZRl1zJ5kM" frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</html></WRAP>\\

**量子コンピュータを説明する - 人類の技術の限界について**\\
<WRAP youtube><html>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JhHMJCUmq28" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</html></WRAP>\\

===== トラブルシューティング =====

==== www.youtube.com で接続が拒否されました。 ====
視聴用 URL(**https://www.youtube.com/watch?v=<id>**) で **<iframe>** に埋め込むと、以下のように__接続が拒否__される。\\
<html>
    <div class="youtube">
        <iframe width="300" height="200" src="https://www.youtube.com/watch?v=JhHMJCUmq28" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</html>
埋込用 URL(**https://www.youtube.com/embed/<id>**) で **<iframe>** に埋め込めば問題ない。\\
<html>
    <div class="youtube">
        <iframe width="300" height="200" src="https://www.youtube.com/embed/JhHMJCUmq28" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</html>

===== 参考文献 =====
[[https://log-file.net/web/css-2094|Youtubeの埋め込み動画をCSSでレスポンシブ対応し縦横の比率を保ったまま伸縮させる方法 | WEB帳]]\\
[[https://allabout.co.jp/gm/gc/396404/|メディアクエリで画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About]]\\
[[https://developers.google.com/youtube/iframe_api_reference|YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google for Developers]] [[gtr>https://developers.google.com/youtube/iframe_api_reference|翻訳]]\\
[[so>questions/22993885/onyoutubeiframeapiready-not-firing|youtube api - onYouTubeIframeAPIReady() not firing - Stack Overflow]] [[gtr>https://stackoverflow.com/questions/22993885/onyoutubeiframeapiready-not-firing|翻訳]]\\