Video in header element

Hi there,

that doc is the correct method for adding videos.
The video has to be self hosted

Thanks, just testing but not very successful so far...
Is there a way to make the video I added there full width responsive?
I kept the element's overlay grey color just for reference.

Try changing this CSS:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

for

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    height: 100vh;
}

On laptop I get an empty space at right and on resizing to smaller screens the video is not responsive: it just keeps its height but the width is cut.

Can you try this instead:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
}

This one works great on desktop but when resizing for smaller screens it gets an empty space below but keeps responsiveness. I maybe need to adjust the element's settings?

Disable the full height option in the header element and give the element some % top and bottom padding. Try 28% in each. This will keep the height responsive.

By "full height" you mean the option "full screen", right?
I did that but with those values I was getting an empty space below in some screen sizes.

I tested with different values and found that what fits best is 28% for top and 14% for bottom paddings. What do you think?

Also, I see that there is still an Offset Site Header Height left over from previous settings, with values of 105px for desktop and 70px for mobile. Should I leave it as is?

If you set the Offset to 0.
Then 28% top and 28% bottom ( ie a Total of 56% ) should work.

Great, you are right, that works fine now.
Many thanks for your precious help guys!

Glad we could be of help