[Tutorial] How to add a Custom HTML5 Background Video

Hey @Live_Tour_Network I moved your post to this Tips & Tricks section where there is a how-to on creating video backgrounds on your site. :smile:
Have fun!

Waldo

A post was split to a new topic: How to fix video for mobile size

Big thanks for this! I wished videos worked on smartphone browsers.

You found a solution to your problem ? I’m with the same…

thanks for sharing this useful tutorial, I had tried to add background video, but it didn’t show up, after following the guide, it finally works.

hi great tutorial so far I’m trying to use a youtube and nothing seem to be working any pointers thanks

` video autoplay loop style="width:100%; height: auto; position:absolute; "
source src=“http://www.youtube.com/embed/i5GU6_Bpxdc”/>
source src=“http://www.youtube.com/embed/i5GU6_Bpxdc”/>

/video>`

I used this but my video just covers about half of my page and its missing the top half.

http://travisbklein.webflow.io/

https://preview.webflow.com/preview/travisbklein?preview=c9a223b9ad616b860ba1acc25a62ff34

I made sure the parent div has relative position also.

any idea why?

Also why doesn’t it loop? thanks so much!

@TravisBKlein soon this WHOLE thread will be obsolete. We’ll be releasing a Background Video component that will allow you to add a background video in 3 clicks!

Join me on next week’s Webflow workshop to see it :wink:

7 Likes

@PixelGeek omg ty, I can’t wait, I have been at this all day

1 Like

Hi, would you mind sharing an ETA for this feature? I was planning to try and implement this in a client’s website today, but I can wait a few days if it would mean doing it in a less hackish way. Is this a matter of days? weeks? months?

Anyhow, thanks in advance for being such a close listen to your community :thumbsup:

@TravisBKlein @bjesus @Adam_Wright @LaurentCardinal @Marcus_Vinicius_Nobr Just a heads up, we just added a native Webflow Background Video component that makes setting this up much easier than before: https://webflow.com/blog/new-feature-the-background-video-component

Cleanup of old abandoned threads.