My autism gets in the way.
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.
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.
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.
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.
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)
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.
No investigation needed, Maybe just a clear description , with the basics you can critically think through constructing a lot of what you want to design.