Join the Webstudio community

Updated 2 months ago

Background Video Element

At a glance

The community member is having difficulty creating a website with a background video on Webstudio, as it requires custom CSS. They have tried uploading the video to AWS and embedding it, but it is still challenging to style the background video. The comments suggest using a Vimeo embed, which can be positioned as a background video, and provide a video tutorial on how to do this. However, there is some confusion around whether the community member is talking about a self-hosted video or a third-party platform like Vimeo. The comments do not provide a definitive answer, but they offer suggestions and resources to help the community member achieve their desired background video effect.

Useful resources
Hi, I am coming from Webflow Ecosystem and most of my clients use Background Video on their header. That's why it was difficult for me to create a website on Webstudio. I did however used an easy hack to upload the video on AWS and add an embed on the home page but it is still really hard to style the background video on Webstudio since you have to write custom CSS for it.
J
O
T
6 comments
I haven't tested this but I think it would work.

Add your video embed (vimeo for now). Position it absolutely with a lower index than it's parent container and inset 0. The parent needs to be relative. This should take up the full size of the parent and you can add text/whatever on top.

The vimeo embed also has a background mode and autoplay.
Attachment
CleanShot_2024-11-22_at_10.29.422x.png
actually... there's a video on how to do this. https://www.youtube.com/watch?v=XO3AntguPZE
you are talking about a video player for a self-hostable video, right?
because I am confused why are you talking about background video and at the same time about self-hosting the video on aws
generally you can quite easily make a background video with vimeo https://www.youtube.com/watch?v=K4FOSKa71Ys
Yeah! I was talking about a self hosted video that stays on the website instead of a 3rd party platform. Adding on Vimeo is fine and I haven't tried it yet but adding it like this would mean fetching it from Vimeo First before the website gets loaded. But nice know this feature exists. Thanks for that. I tried finding answers in Doc but for some reason it wasn't loading that day.
Add a reply
Sign up and join the conversation on Discord