Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support How to get Vimeo video to resize with window?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #300926
    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

    #300930
    Tom
    Lead Developer
    Lead Developer
    #300965
    kyle

    Perfect thank you!

    #301138
    Tom
    Lead Developer
    Lead Developer
    #301332
    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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #301360
    Tom
    Lead Developer
    Lead Developer

    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 😉

    #301416
    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.

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #301601
    Tom
    Lead Developer
    Lead Developer

    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.

    #869602
    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

    #869684
    David
    Staff
    Customer Support

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

    http://embedresponsively.com

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.