Streaming live at 10am (PST)

Video Background (100% Height)


#1

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


#2

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.


#3

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:


#4

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 :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.


#5

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.


#6

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