Create a Full Screen a Background video effect?

Design help Animations & Interactions
1

Hello,

I had a super simple question I wanted to ask. I wanted to create a site (haven’t created it yet hence why there is no READ ONLY Link) which was a single page where there is a small 4-sec animation loop video that would play in the background and continuous loop. As in I want there to be no white space, etc… just the video looping in the background. Later on, I may add a NAV, etc… to it. How would I do that? I tried to drop the “Background video” widget but it only covers half the screen only. Any pointers?

Here is my public share link: LINK
(how to access public share link)

2

Update the height of the background video element to 100vh (viewport height). If it’s not covering the full width of the screen, you can also make the width 100vw (viewport width).

3

And what about the height situation? Do I do 100 VH?

4

Yes, 100vh will make it fill the height of the viewport.

1 Like