Video BG Not Showing Up

Design help General
1

Edit: I am trying to achieve a video BG that is responsive and always keeps a 100% width so it has a variable height depending on the browser size.

Going by the guide here:

We learned how to setup a video BG. We learned to get it to be responsive we need to set it up so the width is 100% and the height is auto. An absolute position and a z index of -1.

We also learned to set up the parent div to be relative and overflow hidden.

Doing this does not work and video does not show up. Once you set the height to auto it disappears.

Also would we set the BG image in the background section and upload an image?

2

Hi @TravisBKlein, have you tried to use the new built in Background Video widget released yesterday?

http://help.webflow.com/article/how-to-add-a-background-video-to-your-webflow-site

3

yes of course, thats the problem.

4

Hi @TravisBKlein, from the description, it looks like you were referring to the old method, that is why I asked :wink:

I am happy to help check on the site having a problem, is it possible for you to share the read-only link, and the page where the video was placed?

Thanks in advance!

5

yea, sorry about that

https://preview.webflow.com/preview/travisbklein?preview=c9a223b9ad616b860ba1acc25a62ff34

I need my video to always cover the width (max 1920) and change as the window gets larger and smaller. So thats why I set it up as we did in the example before the bg widget was made, with auto height.

Also I don’t see the option to set the poster image for mobile devices.

6

Hi @TravisBKlein, thanks, I am taking a look :slight_smile:

7

thanks @cyberdave

The stuff I posted at the top was me just attempting to use what we learned before about positioning, to achieve a responsive bg video, using the new widget.

8

Hi @travis, since the video is not the same aspect ratio as the page, a question for you: Do you want the video to be centered in the page with the aspect ration of the video being used, or do you want to completely stretch the video to match the height of the page, regardless of aspect ratio of the video?

The difference is that when the video is stretched, it probably will appear somewhat contorted. By using the aspect ratio of the video, it will look better but then I would suggest to set the parent element to have a fill color of black.

For example:

When using a 16:9 aspect ratio styling with the homepage div wrapper set to fill color of black:

3146×2686 225 KB

vs video filling the the parent element (homepage div wrapper):

3150×2622 263 KB

Depending on what is best for you, will determine the styling to use.

p.s. in the screenshot the video looks fuzzy because I captured it on some frame… normally the video will be showing in the resolution the video was saved in.

9

hey dave, thanks so much for the reply. Yea I need the video full width and adjustable height. There will be blank space on the top and bottom and also video cut off on top and bottom, depending on the size of the user has the browser.

I keep playing with it, can’t figure out what I’m missing still :frowning:

10

Hi Travis, here is something for you to try:

  1. Update the homepage bgvideo class:

1080×1808 132 KB

  1. Still on the homepage bgvideo class, add a transform of -50% on the Y axis

After that, republish the site and see how it looks on the published site. If you let me know, I will take a look also :slight_smile:

11

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