CSS

レスポンシブデザインで【iframe】の高さを自動的に合わせる

Youtubeなどのを埋め込みたいとき、「iframe」で埋め込むことが多いと思います。

埋め込む、iframeには高さを指定しますが、レスポンシブデザインで、画面が小さくなった時用にCSSで高さを指定する必要があります。

当然ですが、height(高さ)を「100%」にしただけでは、自動では揃ってくれません。

「iframeの高さを高めに指定しておく」「ブレイクポイントごとに、細かく設定する」などで、コンテンツが切れてしまうは回避できますが、下記のようにハック的な感じで設定すると、デバイス幅によって自動的に、高さが揃ってくれます。

HTML

CSS

 

 

ABOUT ME
マシュマロ
Webクリエイター、SEO対策,ガジェット,アフィリエイト情報などを公開中イラスト素材サイトも運営中です。イラストたうん