• 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

Replace BLOATED PAGEBUILDERS with Gutenberg blocks

Icon Font vs SVG – real world performance comparison

How much should good IM coaching cost?

Expected conversion rate for membership sign-ups?

Best WordPress Cache Plugins 2020

AUTOMATE your Social Media Posting (how to)

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