How to make background video responsive?

[adiggy]

Heya! How do I make a background video responsive? I'm going for something like what's on the webflow homepage here:

How was that accomplished? I can't find any buttons n knobs to make the video "cover" like background images do ... Thanks!

[cyberdave]

Hi @adiggy, the video there used is a responsive video embed, with an embed widget:

Here is the code used for the embed widget:

<video   playsinline loop style="max-width: 100%; max-height: 100%; display: block; overflow: hidden; border-radius: 5px;" poster="insert-source-url">
  <source src="insert-source-url" type="video/mp4">
</video>

The poster image and video have been uploaded to Webflow as images and using the background video widget.

The source urls for the video embed, can be changed to the urls of the uploaded assets.

It is possible to get the source video link from the bg video settings (gear icon), after the bg video is uploaded to Webflow:

I hope this helps

[system]

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