差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
html_css:embed_youtube_media_responsive [2022/02/19 18:45] – [サンプル] ともやん | html_css:embed_youtube_media_responsive [2023/03/14 06:16] (現在) – [サンプル] ともやん | ||
---|---|---|---|
行 1: | 行 1: | ||
- | < | ||
- | < | ||
- | @media (max-width: 680px) { | ||
- | .youtube { | ||
- | position: relative; | ||
- | width: 100%; | ||
- | padding-top: | ||
- | } | ||
- | .youtube iframe { | ||
- | position: absolute; | ||
- | top: 0; | ||
- | right: 0; | ||
- | width: 100% !important; | ||
- | height: 100% !important; | ||
- | } | ||
- | } | ||
- | @media (min-width: 900px) { | ||
- | .youtube iframe { | ||
- | width: 560; | ||
- | height: 315; | ||
- | } | ||
- | } | ||
- | </ | ||
- | </ | ||
====== YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法 ====== | ====== YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法 ====== | ||
行 31: | 行 7: | ||
===== CSS の内容 ===== | ===== CSS の内容 ===== | ||
<code css> | <code css> | ||
- | @media (max-width: 680px) { | + | .youtube { |
- | | + | |
- | | + | position: relative; |
- | width: 100%; | + | width: 100%; |
- | padding-top: | + | padding-top: |
+ | |||
+ | 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) { | + | |
- | | + | |
- | width: 560; | + | |
- | height: 315; | + | |
} | } | ||
+ | } | ||
} | } | ||
</ | </ | ||
行 74: | 行 51: | ||
\\ | \\ | ||
**激しいサンプル😅** | **激しいサンプル😅** | ||
- | <html> | + | <WRAP youtube><html> |
- | | + | <iframe width=" |
- | <iframe width=" | + | allow=" |
- | allow=" | + | </html></WRAP>\\ |
- | </div> | + | |
- | </html>\\ | + | |
**ともやん再生リスト🤤**\\ | **ともやん再生リスト🤤**\\ | ||
- | < | ||
- | <div class=" | ||
- | <iframe width=" | ||
- | allow=" | ||
- | </ | ||
- | </ | ||
- | |||
<WRAP group 100%> | <WRAP group 100%> | ||
- | <WRAP column | + | < |
- | **量子力学 -「量子もつれ」**\\ | + | <iframe width="300" height=" |
- | < | + | allow=" |
- | <div class=" | + | </ |
- | <iframe width=" | + | <WRAP left column youtube>< |
- | allow=" | + | <iframe width=" |
- | </div> | + | allow=" |
- | </ | + | </ |
- | </ | + | </WRAP>\\ |
- | < | + | |
- | **特攻警察24時 -「三角関係もつれ」**\\ | + | **世界で人気のミュージック ビデオ トップ 100**\\ |
- | <html> | + | <WRAP youtube><html> |
- | | + | <iframe width=" |
- | <iframe width=" | + | allow=" |
- | allow=" | + | </ |
- | </div> | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
**量子コンピュータを説明する - 人類の技術の限界について**\\ | **量子コンピュータを説明する - 人類の技術の限界について**\\ | ||
- | <html> | + | <WRAP youtube><html> |
- | | + | <iframe width=" |
- | <iframe width=" | + | allow=" |
- | allow=" | + | </html></WRAP>\\ |
- | </div> | + | |
- | </html> | + | |
===== トラブルシューティング ===== | ===== トラブルシューティング ===== |