Youtubeなどのを埋め込みたいとき、「iframe」で埋め込むことが多いと思います。
埋め込む、iframeには高さを指定しますが、レスポンシブデザインで、画面が小さくなった時用にCSSで高さを指定する必要があります。
当然ですが、height（高さ）を「100%」にしただけでは、自動では揃ってくれません。
「iframeの高さを高めに指定しておく」「ブレイクポイントごとに、細かく設定する」などで、コンテンツが切れてしまうは回避できますが、下記のようにハック的な感じで設定すると、デバイス幅によって自動的に、高さが揃ってくれます。
目次
iframe の高さを自動調整
HTML
|
1 2 3 4 5 6 7 |
<div class="box_youtube"> <iframe width="100%" height="560" src="https://www.youtube.com/embed/~~~"></iframe> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@media screen and (max-width: 768px) { .box_youtube{ position: relative; width: 100%; padding: calc(315 / 560 * 100%) 0 0; } .box_youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } |
