Site logo

[Support request] Background video and Mobile Video

Home Forums Support [Support request] Background video and Mobile Video

Home Forums Support Background video and Mobile Video

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1705301
    Steven

    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!

    #1705375
    David
    Staff
    Customer Support

    Hi there,

    to fix the width issue, change this CSS:

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

    to:

    .background-video {
      width: 100vw;
    }

    To add the post image the HTML should look like this:

    <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" poster="full_url_to_post_image"></video></figure>

    Just make sure that any " are straight – no curly quotes.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.