Full screen HTML5 background video

Community resources Webflow Tips
1

Webflow offers native component of background video, unfortunately the compression is so awful that it basically renders this feature useless. Perhaps it’s good for those dimmed short clips but in the website I am designing video is my key visual for the hero section.

Is there a way of implementing background video by embed code that would behave just like the webflow component? I would use link to dropbox file so i can provide file with better quality.

Layout i am trying to achieve is very similar to this website:

https://useplink.com/en/

Thanks for your help!

1 Like
2

I used a simple html in my website and it worked.

<video autoplay loop style=" width:100%; height: 100%;
        display:block; margin: 0 auto; object-fit: cover;">
  <source src="https://insert direct link to the video here" type="video/mp4" />
</video>
3 Likes
3

Oh, man! I knew that it was simpler than I thought!

Updated the embed code with your snipped, and it works like a charm! Thanks a lot!

I just added one thing to the HTML Embed object in Webflow: width 100% and height 100vh

So simple!

4

Neat workaround @witooZ

Should also consider adding the playsinline and muted attributes to the video element incase the video has sound or some browser extension wants to play it in fullscreen.

<video playsinline muted>... </video>
1 Like
5

Yep, you’ll need both of those otherwise browsers like Safari and Chrome will not play the video in the background.

Also, you can add some text between the tags to display an error for people who don’t have the correct browser :slight_smile:

Some more info here:

6

Great hint! Indeed I needed that as well! Thanks for your help!

7

It’s odd I have been trying this solution for a few hours now and just keep ending up with an invisible video. Getting frustrated lol any help?

here is a read-only: Webflow - Dynamic Autoplay BG Video