html_css:embed_youtube_media_responsive

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
html_css:embed_youtube_media_responsive [2022/09/22 12:57] – ともやんhtml_css:embed_youtube_media_responsive [2023/03/14 06:16] (現在) – [サンプル] ともやん
行 7: 行 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>
行 56: 行 57:
  
 **ともやん再生リスト🤤**\\ **ともやん再生リスト🤤**\\
-<WRAP youtube><html> 
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLyBtlztBrNTtWp_rxD3uose2OYRIa2yR3" frameborder="0"  
-    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
-</html></WRAP>\\ 
- 
 <WRAP group 100%> <WRAP group 100%>
 <WRAP left column youtube><html> <WRAP left column youtube><html>
行 71: 行 67:
 </html></WRAP> </html></WRAP>
 </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>+
  
 ===== トラブルシューティング ===== ===== トラブルシューティング =====
  • html_css/embed_youtube_media_responsive.1663819049.txt.gz
  • 最終更新: 2022/09/22 12:57
  • by ともやん