Blank spaces at the top/bottom of landing page

Hello!

Guys, I’m just creating a site for a projetct that I own, and wanted to create a landing page with nothing but a presentation video.

I managed to do that, but, in order to remove the menu nav bar i used some CSS i found on this forum (show below).

But now, when I access the site through my PC there’s some blank space on the top of the page right after the video.
Even worse: When I access the site through a mobile device there’s an even bigger blank space ar the bottom of the page.

Can you help me out with that?

My site is: https://pianobike.com.br/

    .page header.entry-header {
      display: none;
    }

    .page-id-440 header#masthead {
        position: absolute !important;
        background-color: transparent;
    }

    .btn-menu {
        display: none !important;
    }

    .page-id-440 .site-footer, #sidebar-footer {
        display: none;
    }

Hello there,

It happens due to the video header can’t be set to full screen. That’s why in some devices which are taller, more white spaces will appear. Not sure if there’s code solution for this.

You might be interested using this plugin https://wordpress.org/plugins/fullscreen-video-embed/.

Regards,
Kharis