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

My autism gets in the way. :frowning:
I just want to add a local mp4 (1920 X 1080) in a bloc or custom class. Have the optimized video adapt to the Desktop viewport. That video needs to be fully seen. Not cropped with 0 padding.

I would make a smaller optimized videos (dimension and size) for the Laptop, Tablet and Mobile. Add them to the assigned bloc or custom class.

Like what you see here

The video isn’t play on phone. And I’m only on my phone.

I can see that video :smiley:.

But that is different to what you have been talking about. This is streaming a video based on the connection speed. Thats what sites like Youtube, Vimeo, Cloudlfare and other CDNs provide. It’s not something you can do in Blocs as such. You can embed a video from these providers though, either through their embedding code, or some even offer an API for more customised solutions.

Eg. Cloudflare

Yes, I am aware of that. I just showed everyone for an example of what I trying to describe.

This is not related to the topic of this thread though, or what you gave examples of, you can see the confusion. The context was different.

It fits with the root topic “center a responsive background video in all viewport sizes”.

Since I only wanted to show everyone how that video adapts to the viewports it shows what I am trying to achieve. :slight_smile:
BTW, I am not looking for a CDN service.

I just meant, the code that worked for the original poster, you can create a class and enter most of those details into a class. e.g
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;

Hi @AdamNotEve, so I’m assuming this would crop top and bottom of the video if the proportions weren’t correct, and not squash it?
Back to the end-user browser size problem again @KBConcepts, I’m not sure you’ll ever get 100% what you want.

I was just using this code as an example. Saying you can add these to a class, not that this was the solution.

What are we trying to achieve again? im lost.

I believe @KBConcepts is after a video that covers the whole screen, no cropping at whatever size - and it’s not really possible.

The thread just seems to be going around in circles (unless I’m reading it wrong) and want to reiterate that it’s never going to 100% work.

But I stand to learn and be corrected.

To be fully responsive on a video would be impracticable, as it will ruin the aspect ratio of the video and start to look distorted. It can be full screen and then resized but keeping the aspect ratio, which will then lead to the padding on the top or bottom when resized into a portrait aspect ratio.

If you want it to take up the full screen at every sized window, you will have to lose some of the video.

Is this what you’re aiming for? It stays full screen on all resize, but obviously loses the aspect ratio when you make the viewport longer in height than width?
Test-video-bg-fullscreen-1.bloc (20.0 KB)

Hi @AdamNotEve, it’s not me who’s after it, it’s @KBConcepts.

Just trying to get to the root of the question and mentioning the pitfalls.

I’ve given up. The goal post keeps moving :joy::innocent:

1 Like

After lots of testing here is the best I could do. You can check the home page out on the 4 major viewports. I check it out with the Responsively App and it look full screen on Desktop, Laptop, Tablet and Mobile. Thanks to @PeteSharp, using Shape & Colors worked on mobile.


@Eldar, no need to for to look into this any further.

Web skills 101 :smile:

No investigation needed, Maybe just a clear description :smile:, with the basics you can critically think through constructing a lot of what you want to design.

1 Like

Thank you, for taking the time to produce this. I think I found the solution. It’s somewhere in this post.