html_css:embed_youtube_media_responsive

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
html_css:embed_youtube_media_responsive [2022/02/19 19:02] – [サンプル] ともやんhtml_css:embed_youtube_media_responsive [2023/03/14 06:16] (現在) – [サンプル] ともやん
行 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 のメディアクエリを使ってレスポンシブ対応する方法 ====== ====== YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法 ======
  
行 31: 行 7:
 ===== CSS の内容 ===== ===== CSS の内容 =====
 <code 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> </code>
行 74: 行 51:
 \\ \\
 **激しいサンプル😅** **激しいサンプル😅**
-<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 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="390" height="245" 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="390" height="245" 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>+
  
 ===== トラブルシューティング ===== ===== トラブルシューティング =====
  • html_css/embed_youtube_media_responsive.1645264953.txt.gz
  • 最終更新: 2022/02/19 19:02
  • by ともやん