Hi there,
I currently use a ‘Background Video’ element on one of my cms projects, with a 100% viewport height (and 100vw) Aqua Stack - Children’s Toy
The original intention was to create something similar to the Apple AirPods Max page: AirPods Max - Apple
I’m really happy with my result, but the quality bugs me a little. Originally I thought the issue was video resolution, but after comparing a 4K version of the same animation to the current 1440p resolution, I realised it was likely the transcoding that compressed it. A quick search of the forums confirmed it.
So, I’m now looking for a custom solution. After some researching and trialing a number of solutions, I haven’t quite found a custom HTML embed code that allows me to create a background video, that can take up the full view port.
I found a solution that nearly worked, but found I couldn’t prevent the overflow, despite having selected ‘Hidden’ for the section element. It was created using the following:
Section with 100vh & 100vw
Flexbox: vertical direction, align & justify centre
Div block inside the section with 1000% width (yes 1000%), 100% height
Flexbox: vertical direction, align & justify centre
Position: absolute
HTML Embedded inside the div with 100% height & 100% width
Using code from: Embed background and chromeless videos – Help Center
Replace the code titled `your-video-number’ with the numbers from the end of your Vimeo video url.
<iframe src="https://player.vimeo.com/video/your-video-number ?background=1" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
If anyone has any solutions to my problem, please let me know or direct me.
Thanks, Tom.