[Tutorial] How to add a Custom HTML5 Background Video

No answer on how to overlay content over the top of the video background and position it so it centers?

Hi Dan,
I am new here…
I did exactly what you said and replace url of my video to youtube url but no video shown :frowning:
Thanks in advance,
Chris

Sorry for the total noob question but other than dropbox, what alternatives are there for video hosting? I am assuming that Vimeo and YouTube links wont work…

Is there a possibility to show an image on phones and iOS, or tablets ?

Help! Hello, I am trying to figure out how to set a video loop as a section background with text on top of this? Can anybody tell me how to go about this?

looking from something similar to this : https://www.bizzabo.com/


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.