How to center a responsive background video in all viewport sizes?

I Need Help
1

Hi,

I’m feeling quite desperate as I’ve tried a lot, thinking that this should probably work as standard: I want to place a background video in fullscreen. More specific, a video that constantly fills the viewport and is only cropped on the left and right sides when adjusting the browser or to other breakpoints. The video should not be cropped in height, because it shows a centered object rotating.

Strangely, my video in 16:9 format (resolution 1920 x 1080 px / .mp4) is cropped at the bottom when loaded into the block (see screenshot). I’ve tried to restrict the video’s height to 100vh or 100% using a custom class, tried different video resolutions, combining additional code, etc., but all hasn’t worked.
Setting the block containing the video itself also doesn’t yield the desired result. It is also a mystery to me because it is cropped differently at the bottom shown on my Macbook Pro 15" or my 5k Studio display. Can this be a display issue? But I asume, there must be a solution for this?!

The following video shows what I’m trying to achieve (this guy does it with code, but it isn’t complex at all): https://www.youtube.com/watch?v=y9ITxSzjZUc

I would appreciate any help and solution, even better if it can be done without additional coding.

Thanks!

By the way: I’m still using Blocs v4.5.5

Bildschirmfoto 2024-04-18 um 14.59
Bildschirmfoto 2024-04-18 um 14.591920×1200 56.3 KB

2

Hi, you can create a class and then enter most of the css code off your example video, via drop downs etc. Theres, a dimensions section, where you can add the minimum width and height, theres a padding and margins section, and a position section, which you can fill out, the display: flex, overflow: hidden, z-index, etc.

Just pause the video and replicate, it will also probably help you discover what some of the options are doing.

3

Hey,

thank you so much for your help, also for sending over a bloc.bex for the video. I also tried something similar as you did before and I didn’t manage to make it work directly via custom class menu / class manager.

So I ended up with the following solution:

• I created a hero bloc and put my video (1920 x 1080 px / .mp4 / 16:9) as background
• Then I gave the bloc (= the main hero bloc) the classname: fullscreen-video
• After that I used the following code in the body tag (footer):

<style>

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.fullscreen-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.fullscreen-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
}

</style>

The result is, that it still crops the video in height a bit (at least on my Macbook 15"), but this time on top and bottom simultaneously and at least it keeps the video centered in all viewport sizes!

I’m sure it can be done better, but it works for me for now. I hope this is useful for others, and in most cases, it will be a sufficient solution to keep the video centered.

Here’s the result:

Bildschirmfoto 2024-04-18 um 17.10.15
Bildschirmfoto 2024-04-18 um 17.10.151920×1200 61.4 KB

Bildschirmfoto 2024-04-18 um 17.10.25
Bildschirmfoto 2024-04-18 um 17.10.251920×1200 115 KB

Bildschirmfoto 2024-04-18 um 17.10.47
Bildschirmfoto 2024-04-18 um 17.10.471920×1200 114 KB

PS: Set width in .fullscreen-video video from auto to 100vh then it fits completely the viewport in height. I got some white bars though on the left and right side, but I’m getting there :wink:

4

Great post!!
I am with you on this one, with my limited knowledge, I have tried so many things already. None seem to work, but I am sure its just me.

I would love to see answer that works with-in Blocs.

Is it really necessary to use CSS to get this work work?

I am hoping this long ongoing question will be answered soon.

Maybe in the next release or have some Blocs expert develop a Bric solution.

5

Thanks! And yes, I should have emphasized “video in fullscreen” more clearly :blush:.

I’d also appreciate a simple and straightforward drag-and-drop solution for that (maybe there’s one I just haven’t figured out yet?). Although, I have to admit, pasting that little bit of code in the footer section isn’t really a difficult workaround.

Let’s hope that Blocs will support this natively one day.

6

That’s already a feature of Blocs, drag or add a video to a full screen Bloc.

If you inspect the CSS, it is basically what you are adding manually. (apart from you do not need the translate on the Y axis, just set the top: 0;).

By the way, if you add any hand coded CSS to the CSS Input Zone of the code editor, it will be added to the style sheet. You don’t need to add it to the page footer.

1 Like
7

What if you do not want Fullscreen, need to control the height?
Keep in mind needed the video to expand edge to edge.
Featuring: autoplay, loop & no control

For performance I make the following dimensions for each need video:

2550 X 1667px - Desktop

992 X 661px - Laptop

768 X 512 - Tablet

576 X 384px - Mobile

8

Thats easily enough to code. But why do you not ask Norm for a feature request. Adding media query support to the video well in the side bar?

CleanShot 2024-04-19 at 10.04.55@2x

You do not have to use a full screen Blocs. But then I am sure you tested that :laughing:

There is probably little advantage of making 4 videos, remember it’s not devices, its viewport width. You could do just 2. Responsive websites dynamically move between those breakpoints. And basically on desktop resizing the browser will cause the video to change and restart.

9

Original video with audio - Size 36.55 MB

Loading is so much faster…

_D.mp4 - Size 9.88 MB

_L.mp4 - Size 7.46 MB

_T.mp4 - Size 5.28 MB

_M.mp4 - Size 2.55 MB

Love this idea!! :- :smiley:

10

Yeah, but how about without code. :confused: Blocs can do this without using code.

11

This cool feature did not work on mobile. Blocs cut off the sides, as if it were not full screen (16.9)

12

Shapes and colours Alan.

13

Going to make a test site and share it

15

Here the one with no padding, so why is the padding on every breakpoint, but Desktop?
How do you get rid of the white space (padding)? Yes, I know it is 40vh, because I do not full screen

16

What are you expecting to be there?

By the way your link is broken

17

Zero white space (padding). Just the video.

18

You want it there, but also want to get rid of it???

19

Not sure I understand. Can the video be there by itself?

20

You don’t want it full screen and don’t want the white space but also want the white space? I’m confused. Can you clarify.

21

Okay in the sample mp4 above. I want to video to reach full width. The Height to not be cropped. I need there to be no padding (white space)
This is why I made the video sizes

2550 X 1667px - Desktop

992 X 661px - Laptop

768 X 512 - Tablet

576 X 384px - Mobile