Setting variable height for iframe video embeds

Simple CSS fix for iframes not automatically resizing their height (leaving big gap in mobile).

Problem:

Resize your browser window (to mobile widths) and you’ll see a giant vertical space gap after the embedded video.

<iframe src="https://www.facebook.com/plugins/video.php?
height=448&href=https%3A%2F%2Fwww.facebook.com%2Fjohnnymnguyen%2Fvideo
s%2F10157514246835598%2F&show_text=false&width=800" width="800"
height="448" style="border:none;overflow:hidden" scrolling="no"
frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-
write; encrypted-media; picture-in-picture; web-share"
allowFullScreen="true"></iframe>

The fix:

Use variable height and max-height properties to lock its aspect ratio. There are many other solutions but I found this one to be the easiest.

• I replaced width="800" height="448" with style="width:800px; height:56vw; max-height:448px".
• Yes, you theoretically could combine all the styles together but it’s easier to explain this way.
• Now you see there’s no annoying vertical gap underneath in mobile widths.

<iframe src="https://www.facebook.com/plugins/video.php?
height=448&href=https%3A%2F%2Fwww.facebook.com%2Fjohnnymnguyen%2Fvideo
s%2F10157514246835598%2F&show_text=false&width=800" 
style="width:800px;height:56vw;max-height:448px" 
style="border:none;overflow:hidden" scrolling="no" frameborder="0" 
allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-
media; picture-in-picture; web-share" allowFullScreen="true"></iframe>