【CSS】Youtube動画の埋め込みで縦横比率をPCでもスマホでも維持する方法
ブログやホームページにYoutube動画を埋め込む際に
Youtubeで埋め込みコードをコピペすると
サイズが小さかったり、でかすぎたり、
左寄せで見栄えが悪かったり。
そこで、縦横サイズを変えてみても
スマホでは見栄えが悪かったり・・・
さらには、縦横のサイズを入れると
比率がおかしかったり・・・
そこで、横１００％、縦を空欄にして
比率を維持させようと思うも
それでは比率が合わず、縦が短すぎたり・・・
そんな経験された方も多いのではないでしょうか？
この問題は、
CSSで一発で解決します。
PCでもスマホでもタブレットでも
この比率が維持されますので、
手間がかからず便利です。
そのコードはこちら。
iframe {
width: 100%;
aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
}
是非、お試しください。
