差分

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

--- html_css:embed_youtube_media_responsive [2022/09/22 12:57] – ともやん
+++ html_css:embed_youtube_media_responsive [2025/03/12 04:48] (現在) – [参考文献] ともやん
@@ 行 7: / 行 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>
@@ 行 49: / 行 50: @@
 **※モバイルやスマホで余計な通信容量(ギガ)を消費しないように見るためにも [[web:brave|Brave]] の利用をお勧めします。**\\
 \\
-**激しいサンプル😅**
+**我が家のブラ男氏🐶トイプードル🐩当時15歳サンプル😅**
 <WRAP youtube><html>
-  <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/WCc6cgn7kEQ" title="YouTube video player" frameborder="0"
-    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    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=PLyBtlztBrNTtWp_rxD3uose2OYRIa2yR3" frameborder="0"
+  <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>
@@ 行 71: / 行 73: @@
 </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>\\
 **量子コンピュータを説明する - 人類の技術の限界について**\\
-<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>
 ===== トラブルシューティング =====
@@ 行 101: / 行 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|翻訳]]\\