Adding background video to your website – Webflow design tutorial

Adding background video to your website – Webflow design tutorial


Webflow’s background video element gives you a great way to grab visitors’ attention, giving motion to the background of a particular section of content. In fact, a background video behaves almost like a section, so you can put content right inside.

In this video, we’ll show you how to:

1. Add a background video to your site
2. Preview your background video
3. Style your background video


Get started with Webflow:


  1. Hey quick question does this background video work on mobile as well?

  2. The fact you threw in a friends quote…amazing.

  3. I love these tutorials… just getting into webflow 🙌🏻

  4. Not working at my Page like it is shown here.

  5. How to add an color overlay on a background video?

  6. In your example the transcoding resulted in a good quality video. Mine however, got pretty smashed to cubes. The video I have is too long I suppose. What is the desired length to maintain great quality? I was trying to upload a 22 seconds loop. But initially I intended to use a video on youtube of 10 min loop of a background div with custom css ratio height enlargment for iframe but to prevent the video loading I wanted to have a still image that gets display none after the youtubevideo started to play. This might mimic the same effect and gives room for less transcoded video load for you guys including no need for cdn.

  7. irrelevant now, the prompt asks for a URL

  8. what about adding a youtube/vimeo URL?

  9. Is there any way to add play/pause/mute buttons? There's nothing in the interactions panel.

  10. What is the solution for modifying a background vid for responsive mobile devices?

Leave a Reply

Your email address will not be published. Required fields are marked *