How to create a responsive video backgro...

At a glance

A community member is starting a migration to Webstudio and is having trouble creating a video background. They tried a method but it didn't work, and they are wondering if there is a way to have a Media element in the components that allows styling CSS and HTML while keeping the video in a CMS like Dropbox or Google Drive. The comments suggest using an HTML Embed to style the video or using Vimeo, but the community member's client refused Vimeo due to the price. The community members discuss the pros and cons of different options, but there is no explicitly marked answer.

Useful resources

NNaldo gMoura

Starting my migration to Webstudio, but I just hit a wall when creating a video background.

I tried that, but it didn't work. Would it be possible to have a Media element in the components that allows you to style CSS and HTML while keeping the video in Dropbox, Google Drive, or another CMS, like in this tutorial?
https://dev.to/peboy/how-to-create-a-responsive-video-background-in-html-and-css-1bh6

12 comments

JJohn Siciliano

HTML Embed allows styles so I'd drop the video html in there and then the fullscreen-video-container would essentially be the HTML embed where you can use the style panel to style instead of custom css

JJohn Siciliano

or use vimeo as the vimeo component is highly performant and versatile

NNaldo gMoura

I will try the first option, my client refused vimeo, due to the price.
It's a short frame, I made it, I have it here ready on Webflow.

Attachment

NNaldo gMoura

It's incredible how delicious this fluidity is inside Webstudio, my god❤️

JJohn Siciliano

I'll add "Webstudio, the delicious fluid platform" to ways to describe the platform 😉

JJohn Siciliano

Does the free tier not have something you need? Maybe theres a limimtation to removing all controls to make it a bg, but idk worth a shot?

Attachment

NNaldo gMoura

If I solve the problem, this one is much more worth hiring.😃

Attachment

JJohn Siciliano

I don't follow. I was talking about Vimeo pricing and their free tier

OOleg Isonen

Lol, should we make it our slogan?

NNaldo gMoura

I think it's fantastic, I feel like my mouse has become a rocket, I'm the pilot in control baby.😆

ccalamitykay

I found that the free tier makes it so you have to have the Vimeo branding on the video which isn't great. Also my bg videos would not autoplay despite following tutorials and trying all the different things I found in the discord.

JJohn Siciliano

Ah bummer. Thanks for the info!

Add a reply

Join the Webstudio community

How to create a responsive video backgro...