Responsive background video

Site URL: https://www.dogdays.fi

Hi,

Which code do I need to add to make my websites background video responsive?

And how do I remove the unwanted blocks in the bottom, when viewing the website in example an iPad?

I've tried searching this forum and the web. Added some code, helped a little but didn't really solve my problem.

pw: koira

This is what I'm looking for https://www.pablo.fi/ 

Add to Home > Design > Custom CSS

/* Fullheight home video */
@media screen and (max-width:991px) {
body.homepage #page section:first-child {
    min-height: 100vh;
}
}

@tuanphan thanks! 

Hmm, but now the background video doesn't seem to play on a smartphone🤔

and on a computer screen there's still that part in the bottom..

So I would want the background image to be visible for the time the background video loads.