[Tutorial] How to add a Custom HTML5 Background Video

Also how can i make a video only play when i use slider.

Hi, use your solution and video doesnt goes full screen with 100% height, how to set body to relative postition in webflow, that function not active

I cant get this to fill the screen 100% height. How to do that?

If you have the positioning set to relative and overflow hidden, you should be able to set your height by typing in 100% within the position panel. This will work on your desktop views and designing depending other views also.

Tip very good. It worked fine on my site. Thank you.

I’m still having trouble with my fixed navigation displaying after implementing my background video. I have a section with class “Navigation” that has absolute positioning at the bottom of my hero section, and a navbar that appears when “Navigation” scrolls out of view, with class “Fixed Navigation.” However, after implementing the background video, “Fixed Navigation” no longer appears when scrolling, but seems to disappear behind the second section (“About Us”) as if the z-index is lower than everything else. I have raised the z-index on “Fixed Navigation” to be higher than everything on the page, but am still having the same issue.

The preview link is here:
https://preview.webflow.com/preview/newanglecreative-test?preview=d14ffda93b1859b14ff7f93096c2129b

Hello, do you know if there is a way to autoplay the video, but just after all assets load’??

Thanks!

HI, I’ve followed the tutorial on adding background video and its working fine on laptop, but I am just not getting the still image to appear on mobile. Nothing but a white screen appears in the section. I’m still relatively new at this… Can anyone help?
Thanks!!!

https://preview.webflow.com/preview/boomerangjet?preview=abee6d05a249378e0204b3d6e0f2783b

Videos of any height will be tailored to the size of the block . Now the image is displayed on iOS devices:

 <video autoplay loop style="min-width:100%;min-height:100%;width:auto;height:auto;margin-left:0;margin-top:0; position:absolute; z-index: -1;" poster="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type="video/mp4" />
 <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
</video>
1 Like

I’ve managed to add a video background using this example. However I am trying to add a slider for text to center on the top in the center of the video and cannot figure this out. Always seems to be at the top above the actual video and if I try to move it simply slides the video lower. Any suggestions? Here is share link: https://preview.webflow.com/preview/red-hot-rc?preview=81dd43fb1e8df304925043128f183a8a

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.