Non-Responsive Video Background

I’m trying to set a 100vh video background to a bar, which I can do just fine, but I want to make it so that there are no black bars at the top or bottom. Basically I want the video to take up the entire area regardless of the size of the browser.

Here’s an example: https://www.engineshopagency.com/ of what I’m talking about. You’ll see that even when you drag the browser size around a bunch, the video always fills it up.

And here’s what I’m working with: https://hmblhouse.com/hmbl-house-dev/. When you drag this around you get black bars at the top and bottom.

I’m doing this in Pro Header, but I also tried a few ways of doing it in the page itself. I could use Slider Revolution if I needed to, but I’m not sure what settings I’d need to use and I like having the video extend into the header area. I’m just not well-versed in some of the intricacies of Slider Revolution. That is to say, if I need to take this out of the header and put it on the page, that’s fine. If I need to do it in SR, that’s fine too, but pointing me to some instructions would be helpful.

Thanks!

Hey Zach,

Our Video background is responsive and will cover the section out of the box. Only self-hosted videos are allowed though. You’re currently using Youtube embed. Please change that to a self-hosted video. In case you’re not aware, self-hosted videos can be accessed directly like https:example.com/video.mp4. Also, use mp4 for cross-browser compatiblity.

Hope that helps.

Okay, thanks.

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.