Responsive Video Background with fixed-width and position

  • 18 June 2020
  • 2 replies
  • 26 views
Ozi_Ozbicerler

Hello,

I need help figuring out a way to keep my video background fixed in its dimensions/ratio but responsive as it scales down without being cut from the sides.

I tried many different codes/CSS I found online but nothing works.
I have a 1400px and a 2000px version I tried but it didn’t make much difference. I just want it to scale down but preserve the entire frame.

Thank you!

Here’s the preview link: https://app.unbounce.com/3718371/pages/63bec1b4-676c-4203-a2d7-ab10a0a7349c/preview?variant_id=229319351#desktop

2 replies

Jess
Rank
Userlevel 7
Badge +1

Hi Ozi, good question!

A couple things I’ll point out real quick is that other community members won’t be able to see the preview of your LP (I can just because I’m on the Unbounce side), so if you’re able to share the published URL you may be able to get more responses from other Unbounce customers. But I’ll do my best here to help out.

Something that we recommend for video backgrounds is embedding them in an HTML widget instead. This option is far less restrictive in terms of responsiveness. Here’s some documention on the Vimeo side of things for embedding your video.

And here’s the documentation from the Unbounce side when you’re adding an HTML widget to your page.

Then just adjust the properties of the custom HTML element so the sizes match.

I’ll keep an eye out. It’s possible other members in the community have found a way to adjust their video backgrounds using custom scripts. Hopefully this provides a little help for now.

Take care,

-Jess

Ozi_Ozbicerler

Thank you Jess! And thanks for the heads up I didn’t know it was private.

Turns out Vimeo only lets users use the videos as background if they are enrolled in a plus plan. I hope there is another solution or a workaround to just do this with html/css.

Reply


Terms & ConditionsCookie settings