[Tutorial] How to add a Custom HTML5 Background Video

Hi @Dario,

I see what you mean… you’re essentially trying to achieve background cover for your video. While this isn’t natively built into webflow, you can add some custom code to achieve this effect.

Take a look at this example on JS Bin:

In order to get this working on your webflow site, follow these steps:

  1. Copy the new HTML Embed block into your video embed.
  2. Style your videocontainer div to make the Overflow hidden.
  3. Place the custom JS into your </body> code section, inside a <script></script> tag.

Since this uses custom JS, it won’t actually execute the resize effect until published or exported, but hopefully this gets you on the right path! :thumbsup:

-Dan

5 Likes