Streaming live at 10am (PST)

Video Background (100% Height)

Hello Everyone.
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. :smile: It would be really helpful if a tutorial is created on this to help others get such output.

References:



and http://fvsch.com/code/video-background/

I hope ! helps. :+1: Good luck

Hi, nice work.

Do you realize that even if you get the result you wanted for simulated devices within Webflow designer (on your computer in a browser), this will not work either on tablets nor smartphones as there’s 1/ no autostart on mobile and 2/ videos don’t play inline on smartphones (they open in the mobile player; fullscreen)?

However, there’s good things with your solution, that I am going to bring to my own solution: you got the video to be centered horizontally, which normally requires a lot more work that you did… so I have top get deeper into what you did but that’s amazing if it works so simply for me too! Kudos and thanks a lot for that!

For mobile, when I use a video BG, I make it invisible for mobile and I craft a solution with an animated gif or a sliding picture to get “kinda” the same effect.

2 Likes

oh yes indeed, I do realize that… It took me some time to discover this limitation of tag. That is why I suggested to use poster property.

Your recommendations for using GIF or sliding pictures is indeed useful. I tried to use GIF earlier but it was more than 100 MB. Any suggestions in getting good quality yet smaller file size?

Thanks @vincent! Appreciate it all :smiley:

I have to test that again… I notice you’re only declaring two formats, which will make it not work on mobile, hence showing the poster… If that’s the case I’ve been stupidly producing/declaring all versions even if it doesn’t work for background on mobile. Will test that this week :slight_smile: Have you tried declaring an animated gif as a poster? Never thought about it…

Best tool for gif compression is still Photoshop. But even there, you can’t get long and good gifs at small size, at-all. You have to be creative. It’s better to make CSS or JS animations for mobile bgs.

1 Like

tbh, I haven’t done much of the testing yet, but have read some articles. As per an article, one of the cons of the tag is: it doesnt works on mobiles due to security reasons (with Android and iOS).

Therefore I think your brilliant idea of using GIF as a poster would be definitely useful! Surely needs to be tested.

Just try 100VH for vertical and 100VW for horizontal.

Thanks for this post, it works for me. Strangely the width and height values work in the embed code, but if I remove them from the embed code and add them through the webflow interface it does not. The object-cover is a great solution, seems webflow only allows that to background images, in this instance it is useful in an embed code element. Anyway, thanks!

Do note that background videos are further post-upload processed and compression is applied by Webflow, then stretched in the browser which makes them blurry. If you are going to use a full-screen/full-width video, this effect/issue will become very noticable.

I’ve detailed my findings here Getting rid of a blurry Video Background

You don’t need a code. You just upload a background video and then type in “100 VH” into the define the height box.

So simple right, smh. Hopefully this saves someone else a lot of time.