[Resolved] How to get Vimeo video to resize with window?

[kyle]

I have just put a text video on my website and I can’t get it to resize with the window.

The width resizes correctly but the height remains the same no matter how narrow the window is which leaves a lot of empty black space.

Here, take a look:

http://swingtradesmart.com/what-is-swing-trading/

And here’s an example of how I would like it to be:

https://www.affiliateresources.org/beginners-guide-to-affiliate-marketing/

Thanks in advance for any replies which may help me work out how to solve this problem

Kyle

[Tom]

Hi there,

This might help: https://docs.generatepress.com/article/responsive-videos/

[kyle]

Perfect thank you!

[Tom]

You’re welcome 🙂

[Lyle]

Tom,

Good thing I came across this topic as I did not realize my videos were not responsive! Yikes!

I fixed up a number of the most recent ones and they all look great now. 🙂

As I know darn well I am going to forget about doing this when I add the next ones, is there any way that the responsive videos could somehow be implemented into GP? In the meantime, it’s another sticky note onto the monitor 🙂

Cheers!
Lyle

[Tom]

The CSS isn’t extensive, so I don’t see why it couldn’t be added by default. I try to live by the “if everyone doesn’t need it” rule when it comes to adding code, however maybe I can find other areas to trim down so I can add this without feeling bad 😉

[Lyle]

LOL 🙂 I hear ya!

But in today’s world, I can’t help but think that many folk are adding videos to their sites and are not aware that these videos are not responsive. This was my case. I just “assumed” they were, and you know what that means 😉

When you get right down to it, and this is what I had assumed, this should be a function of WP core. I know that one can get this by using a plugin or a page builder, but for my videos, I use the plain old WP editor and had thought that by adding the embedded link, via Add Media > URL, they would behave properly on mobile, theme agnostic.

[Tom]

Trouble with that is you still need to wrap your video in an element.

That means that users who don’t know about responsive videos will still run into that issue even if the CSS is added by default.

I’m sure browsers will one day implement automatic responsive video resizing, only a matter of time I’d guess.

[Jay]

I’m late to the party here, but just discovered this thread when doing some backlink research.

Here is the exact code I used for that video.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class="embed-container"><iframe src="https://player.vimeo.com/video/89755633" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Hope this helps!
Jay

[David]

Thanks for sharing – i personally like this site if you run into responsive embed issues:

http://embedresponsively.com

[Author]

Posts