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!