• Skip to primary navigation
  • Skip to main content
  • Skip to footer

WPJohnny

WordPress Performance Guides and Reviews

  • Start a WordPress site
  • Hosting
  • Themes
  • Plugins
  • Blogging
  • Marketing

Setting variable height for iframe video embeds

WordPress themes Jan 3, 2021 by Johnny

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>

Share this post:

Share on FacebookShare on X (Twitter)Share on LinkedInShare on WhatsAppShare on EmailShare on SMS

Read all my posts on WordPress themes

About Johnny

Right on the edge of WordPress development! 10+ years of WordPress design, development, hosting, speed optimization, product advisor, marketing, monetization. I do all that.

More WordPress Guides

How to Get People to BUY From You

RunCloud cloud-based VPS webhosting control panel 2019 review

How to get early access to Cloudflare QUIC?

Digital Access Pass (DAP) WordPress Membership Plugin Review – UPDATED 2019

Linux Server Commands CHEATSHEET (for newb admins)

Affiliate Marketing Expectations (companies vs bloggers)

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

More links

  • Gadget reviews
  • Try my free WPJ plugins
  • Join the WPJ FB Group
  • WPJ YouTube & newsletter
  • Become a WPJ Affiliate

Popular Reviews

  • Best WordPress Hosting
  • Best WordPress Themes
  • Best WordPress Plugins
  • Best WordPress Cache Plugins

Services

  • Speed optimization
  • Speed optimization courses
  • WordPress hosting
  • Hire me or other experts
  • Client login

About Johnny

10+ years of WordPress design, development, hosting, speed optimization, marketing.
Contact me.

newsletter block

Copyright 2025 | WordPress guides by Johnny Nguyen

Click to Copy