Since couple of weeks I’ve been struggling to set a video background for my hero section that fills the screen vertically for all the devices (desktop, tablet, mobile). I read several posts in the forum that had helpful responses from the WebFlow geniuses. Even though it solved my other issues regarding the background video yet my struggle for getting a 100% height video background remained unsolved.
After reading some articles around, I finally succeeded in getting 100% height for the background video.
Here is the public link: https://preview.webflow.com/preview/videobg100pcentheight?preview=056a0c147c08bc90c7f5d5c2f19b5cd4
The following is the basic structure of the embed-ed code:
<video autoplay loop style="width:100% ; height: auto; min-width:100%; min-height:100%; object-fit: cover; preload=auto; 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>
Note the “object-fit: cover” helps you to get that result along with min-width, min-height, and setting up the height and width of body, parent section (div) to 100%, 100VH, 100VW
Also note the tag poster, it is used to display an image if the video doesnt works. (a solution for mobile browsers).
Do keep in your consideration that I am not an expert… and so chances are that my way of doing this might not be the best. I leave this on the WebFlow gurus to verify. It would be really helpful if a tutorial is created on this to help others get such output.
I hope ! helps. Good luck