Streaming live at 10am (PST)

Custom Background Video

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: Embedding background and chromeless videos – Vimeo 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.

Is your only issue with the ‘Background Video’ element the transcoding?

Take a look at this workaround…