差分

このページの2つのバージョン間の差分を表示します。

--- html_css:embed_youtube_media_responsive [2022/02/19 19:07] – [サンプル] ともやん
+++ html_css:embed_youtube_media_responsive [2025/03/12 04:48] (現在) – [参考文献] ともやん
@@ 行 1: / 行 1: @@
-<html>
-    <style>
-        @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;
-            }
-        }
-    </style>
-</html>
 ====== YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法 ======
@@ 行 31: / 行 7: @@
 ===== CSS の内容 =====
 <code css>
-@media (max-width: 680px) {
+.youtube {
-    .youtube {
+  @media (max-width: 680px) {
-        position: relative;
+    position: relative;
-        width: 100%;
+    width: 100%;
-        padding-top: 56.25%;
+    padding-top: 56.25%;
+    iframe {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100% !important;
+      height: 100% !important;
     }
-    .youtube iframe {
+  }
-        position: absolute;
+  @media (min-width: 900px) {
-        top: 0;
+    iframe {
-        right: 0;
+      width: 560;
-        width: 100% !important;
+      height: 315;
-        height: 100% !important;
-    }
-}
-@media (min-width: 900px) {
-    .youtube iframe {
-        width: 560;
-        height: 315;
     }
+  }
 }
 </code>
@@ 行 73: / 行 50: @@
 **※モバイルやスマホで余計な通信容量(ギガ)を消費しないように見るためにも [[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>\\
 **激しいサンプル😅**
-<html>
+<WRAP youtube><html>
-    <div class="youtube">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTtiY9UZPHeVHtae5qQRB_VY" frameborder="0"
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/CJ7NEKO-jHw" frameborder="0"
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</html></WRAP>\\
-    </div>
-</html>\\
 **ともやん再生リスト🤤**\\
-<html>
-    <div class="youtube">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLfy4xuqulPyEjxNnZwVwfiwMYfHTRa6Nz" frameborder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-    </div>
-</html>\\
 <WRAP group 100%>
-<WRAP half column>
+<WRAP left column youtube><html>
-**量子力学 -「量子もつれ」**\\
+  <iframe width="300" height="240" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTvXrAKuRqiNBjmhouN0M1v7" frameborder="0"
-<html>
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-    <div class="youtube">
+</html></WRAP>
-        <iframe width="426" height="240" src="https://www.youtube.com/embed/kljxDBRvhe4" frameborder="0"
+<WRAP left column youtube><html>
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <iframe width="300" height="240" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTtdlWOPo0mNu1kVxgbKn0Y1" frameborder="0"
-    </div>
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</html>
+</html></WRAP>
-</WRAP>
+</WRAP>\\
-<WRAP half column>
-**特攻警察24時 -「三角関係もつれ」**\\
+**世界で人気のミュージック ビデオ トップ 100**\\
-<html>
+<WRAP youtube><html>
-    <div class="youtube">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL4fGSI1pDJn5kI81J1fYWK5eZRl1zJ5kM" frameborder="0"
-        <iframe width="426" height="240" src="https://www.youtube.com/embed/TmjdkcdnF6A" frameborder="0"
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</html></WRAP>\\
-    </div>
-</html>
-</WRAP>
-</WRAP>
 **量子コンピュータを説明する - 人類の技術の限界について**\\
-<html>
+<WRAP youtube><html>
-    <div class="youtube">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/JhHMJCUmq28" frameborder="0"
-        <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>
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</html></WRAP>\\
-    </div>
-</html>
 ===== トラブルシューティング =====
@@ 行 139: / 行 107: @@
 [[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|翻訳]]\\