Background video and Mobile Video

Good Morning,

I have GPP, and a have a background video for desktop that is loading instantly but it is acting like there is a right sidebar for the video section. The rest of my page is 100% width except the video.

Here is my code:

<video loop="" muted="" autoplay="" poster="URL/TO/poster.jpg" class="background-video hide-on-mobile hide-on-tablet">
    <source src="https://googlegrowthseo.com/wp-content/uploads/2021/03/Grow-With-Google-Growth-SEO.mp4" type="video/mp4">
</video>

<div class="background-video-content">
    
</div>

& my CSS

.generate-sections-container {
    position: relative;
}

.background-video {
max-width: 99%;
}

For Mobile & Tablet, Pagespeed insights says that it is pretty fast but, in reality, it takes 15 seconds to load my 40s video. With the video being the first thing on my page. I am looking for it to be interactive much quicker then that.

Also, I was trying to get a poster image on mobile, by adding poster="URL/TO/poster.jpg" and it said it broke the code.

Here is my code
<figure class="wp-block-video hide-on-desktop"><video controls="" src="https://googlegrowthseo.com/wp-content/uploads/2021/03/Grow-With-Google-Growth-SEO.mp4"></video></figure>

and my website is googlegrowthseo.com

Thanks for the support!