How can I get my vimeo background video to scale to full width of the container?

[saltydog]

I am using a vimeo embeded video as a background layer so that I can put a colour layer above it and then text over the top of it. My problem is that the video doesn’t quite fill the space. The Poster image does, but I can’t get the video to do the same. I keep getting bars either side of the video. If I set it to parallax, it is slightly better, but then there is a bar at the top. Could you let me know it there is a setting I could change to get the video to fill the entire width like an image would?

Here is my the site:

3D Animation Studio

The video is at the top of the main page.

[ruenel]

Hello @saltydog,

Thanks for writing in! Regretfully we cannot see the video because it is private.

Check the video URL in the secure note below.

Best Regards.

[saltydog]

Oops. I’ve changed the video settings to public, so you should be able to see it now.

[tristup]

Hi @saltydog,

The video shows as per the aspect ratio of 16:9 or similar and that are why it is not filling the space. I would suggest you use the Self Hosted video through which you can acheive this and the self-hosted video does not show the black bar too. I would also suggest you go through the following thread on a similar topic.

Video background shows black bars

Hi! I ended up using a revolution slider instead and that took care of the issue. Originally, I had set the background of the section as a video and that’s where I was getting the black bars when the page was less than 1200px wide. The video itself is in the correct 16:9 aspect ratio as far as I know. It would be a great time-saver to be able to figure out how to just set the background and have it adjust properly without having to use Slider Revolution. If you want to recreate the issue to see…

Thanks

[saltydog]

Thanks a lot. That looks like the thread I was looking for. Self-hosting is the solution for me. Good to know that YouTube and Vimeo embeds won’t work in this scenario.

My only issue now that I have it self-hosted is that the video doesn’t resize automatically if I change the size of my browser window. It will load fine at the right size, but doesn’t scale as you would expect live if the browser size is made smaller or larger.

[tristup]

Hi @saltydog,

If that loads in the perfect size, you can ignore the problem of resizing the Browser window. If you still need us to investigate it, please share the exact page URL to investigate it once. We may also need the WordPress admin credentials to check the settings, please provide login credentials in a secure note, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[saltydog]

My initial problem was solved by self-hosting. The video loads at the correct size, but I’m not happy with the way it looks if the browser is resized after loading. I have decided to give up on trying to get text to work over a background video since I didn’t find a workable solution.
Thanks for your help though.

[ruenel]

You are most welcome.