Simple responsive Video embed for background videos

Hi!

What I am looking for: As a videographer my site has lots of background videos, which I want to autoplay, loop, be muted and have NO controls at all. + They for sure should be responsive and maintain the right aspect ratio on every device.

The only solution for this I found so far, is to use streamable.com. This works fine and is very easy to use. But unfortunately it does not work on mobile. For the video to play there you have first to interact with the video by pressing play.

So I am back here asking if there is really no workaround for this problem.

I already wrote Webflow to find a solution for this problem as not having a native solution for responsive background videos in 2023 is simply not believable…

I would like to try the html video tag embed, but would need some help there as I am new to coding and I do not really get what I need as a source as I can not upload Videos as assets in Webflow. So I guess I would need a work around via dropbox?

Does anyone have a good step by step guide for it or does know other solutions?

As far as I know Youtube and Vimeo do not let you hide EVERY control, so this is not an option, either.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

autoplay is decided by the browser you have no control there, is the browser based on certain conditions that will decide if a video can autoplay or not Autoplay policy in Chrome - Chrome Developers

Okay that means I need to work with the html video tag anyway…

will change nothing, video html5 has the same limitations, autoplay is possible only after an user interaction, is a browser policy. On iOs for example if you are on limited data, or low battery mode, you can even dance but the video will not start automatically

Hm. I already have coded websites with the videotag where the auotplay functions on mobile, too?

it works, but not always and it’s not reliable 100%, if you just read the link I’ve sent you before you will understand why

1 Like

Okay. How ever: Here is the right solution to the problem: