Streaming live at 10am (PST)

Sizing a background video

I’ve seen a lot of questions but couldn’t find a solution. It seems like many issues are related to mobile, but not me. All I want is to show a video on desktop, in a loop, but not on full screen.
I’ve inserted a background video into a div, but no matter what position I picked (static, relative, absolute) it goes beyond the borders of the div. I can use overflow:none, but that would crop a significant part of my video. What should I do?
05

https://preview.webflow.com/preview/asafs-stunning-project?utm_source=asafs-stunning-project&preview=1a9d33f813738626d630672a0c94234a

Thats because you have the hight on the video set to 500px and the width of the div to 500px so of course it will go outside of the parameters. Background videos don’t work the same as background images. Size your video manually based on it’s aspect ratio. Do you want this to be a popup type thing or just a certain size on the page? If the latter, just nest it inside a section then container and it should span 960px wide automatically.

If you are new to Webflow and web design in general, I suggest checking out a whole lot of the videos on the university page before continuing. It will save you tons of frustration.

1 Like

Hey, @LupoAsaf,

Background video is not the proper choice for what you’re trying to accomplish. By its very nature, it is intended to provide context by supporting the adjacent or overlaid content. Likewise, background video will always “cover” the available space as opposed to "contain"ing the video in the available space. If you were using an image, you’d have the choice between the two.

However, I think what you’re looking for is a scalable video component. There are two which are labeled as video or youtube in the components panel. Just set the video “100%” width and height to “auto” and it will stay proportionate to its container…however…

It also appears you’re trying to show a non-hosted video (i.e. not Youtube, Vimeo, etc). That, unfortunately, eliminates the two video components mentioned. There is no current, built-in, component that allows you to upload your own video (like background video does) but treats it like a traditional video.

Is there a reason you’re not using youtube nor vimeo to serve up this video?

1 Like

Thank you for the quick reply. I don’t mind hosting the video at all, but I’d like the video to auto-play and loop (like a GIF but without the limitation of length or quality). It seems like the background video is a better fit.
I’ve tried to implement @DFink’s advice, but the video bleeds in both axis. That doesn’t make sense to me even in a cover context. Don’t you think, @flowpros?


https://preview.webflow.com/preview/asafs-stunning-project?utm_source=asafs-stunning-project&preview=1a9d33f813738626d630672a0c94234a

If anyone runs into this problem, I got a solution from Micah at Webflow Support.
Here it is:
I was able to create a clone of your project, and used your background video file (we suggest you host your file externally, as it would be easier to locate and manage) to create a custom coded video player that automatically plays: https://asafs-stunning-project-video.webflow.io/

You may access the Read-Only link at the following URL: https://preview.webflow.com/preview/asafs-stunning-project-video?utm_source=asafs-stunning-project-video&preview=7e798dabd95bd34b8e2511a09b2b0c01

The following short screencapture notes the process to implement this video player: https://cl.ly/318eaa16d5cb

In case the video is no longer available, the idea is to use HTML element instead of a video background element with the following code:

<video playsinline autoplay muted loop width="100%">
  <source src="https://uploads-ssl.webflow.com/5c76928fdcc2cc846da01c10/5c76928fdcc2cc303ba01ef6_Create Capsule Seth-transcode.mp4" type="video/mp4">
</video>

Make sure to replace the link to the video in the code above (next to “src=”).
Good luck, and thanks Micha!

This is great and works if your code example is pasted into my website HTML code with DIv block as it seems you file is hosted on Webflow which I can’t do… However, I cannot seem to get it to work with hosting on Youtube or Vimeo. Any ideas why?

Very frustrating basics. Functionality should have been thought about and built into Webflow when the background was implemented.