Background Video & Replace Still Image - 'perfect' Setup

Hi there.

This is all about… Ho do you set this up ‘perfect’?

I´ve read all posts here (at least I think I have) and there are still some gaps around. Here is the case:

At this project we´ve 3 fullpage background-videos showing under each other. As You can imagine this not that great for mobile performance - so we want to ‘replace’ this videos with images there.

  1. Placing a background image at a mobile breakpoint don´t overlay the video. This wouldn´t be a final solution - but why has the video a higher layer order as the image? Otherwise You could load a masked image in front and use a video as well.

  2. Thought about a ‘workaround’ and set a simple small black video at the mobile breakpoint - but Bricks don´t seem to care for the new video file. It loads the one that is placed for desktop. Is this a technical limitation? If yes the other breakpoint video slots should be locked.

  3. I know about the way to use different divs and work with display: none at the breakpoints - but… display: none ist a good solution at this point. The videos don´t show up at mobile - but they will still be rendered / loaded and nothing is won in case of loading performance.

So - how Do You handle such cases to get the best performance on any device?

In my eyes the best way would be an option to ‘unload’ the videos for different breakpoint and set a fresh image where needed.

I also still have the ‘bug’ of a small white line at the left side using a background video. This seems to happen if the screen size is something over 1920 pixel width. Using a PC with Firefox - but Chrome shows this line as well.

Best / Sascha

4 Likes

Why hasn’t this got any replies? :frowning:

2 Likes

I did the third solution. A better approach would be to load the resources with JS once conditions are met. But in my case the actual video weight was of little relevance.