[Support request] Hero Section Video – Hosting & Load Time Question

[Royce]

Hi GP Team!

I followed the instructions in your documentation for adding a video into the hero section of a website successfully, but I had a question regarding video hosting and load times.

1. Where do you suggest hosting the video file from? The instructions didn’t mention anything in particular, and just mentioned a URL where the file would be hosted, but I was wondering if there was any best practices or suggestions on where hosting the video might be the most efficient? I originally used the FTP client on my webhost to host the file and got the link to that, but was wondering if this was the way to go?

2. In your experience, does adding a video like this on the front page of the website affect the site load times by a lot? Or is it generally negligible in terms of load time? I noticed that the templates from the site library would load images as a background of a container to improve load speeds, but I don’t think the method mentioned in the documentation does this – or am I mistaken?

Any information on the above would be of great help! I’m still on the fence if its worth putting a video on the home page for the possible effect on load times.

Thanks in advance!

[David]

Hi there,

i’ll answer this assuming its just a single video, that isn’t too long and is loading only on the home page hero.

1. If the video is super duper important to me and its quite a large file sitting above the fold, then i would probably opt for a 3rd party streaming server so a) it can handle a lot of current views without overloading your server and b) it can stream video ie. the user doesn’t have to wait for the entire file to download before it begins playing. For a ‘cheap’ option you can use Vimeo.

If its a small file then i would probably just leave it on my server.

2. Performance wise, videos above the fold will most likely be part of the LCP element, so to improve the perceived performance make sure you have a well optimized poster image to load first.

[Royce]

Hi David,

Thanks for the detailed response.

I’ll be trying to point my code to a Vimeo hosted video (on basic atm) and I’ll see how that turns out.

May I also ask what the process would be to have a poster image to load first? It’s my first time hearing about this, and makes total sense. Would I be using a plugin of some sort? Or would it be something like a container containing a background image under the video file?

Thanks in advance!

[Elvin]

Hi Royce,

May I also ask what the process would be to have a poster image to load first? It’s my first time hearing about this, and makes total sense. Would I be using a plugin of some sort? Or would it be something like a container containing a background image under the video file?

To add to the conversation:

What David meant is something like the one on this site – Demo link

See the video on the 2nd section. (the one with the stacked trucks)

On page load, it doesn’t load any youtube scripts. It’s only an image overlaid with a play button.

When you click the button, you’ll see its UI change. That means it only loaded the embedded video when the user clicked.

This is just a rough example. There are better scripts or a specialized plugins for this .

You can try this one – https://wordpress.org/plugins/load-video-on-click/ – but we’re not sure how well it works. (it’s beyond our scope, unfortunately)

[Royce]

Hi Elvin,

Thanks for the clarification.

Unfortunately, I was planning on having the video autoplay on load as a background to my hero section, so I don’t think a video with an overlaid button would suit my needs.

I’ll try it out as is and see what Google lighthouse reporting says.

[Elvin]

Ah yes, if you plan to do Auto play then you really should load it.

If it’s a small video file, you can host it on your site and preload it to try to address LCP issues.
https://web.dev/optimize-lcp/#preload-important-resources

[Royce]

Hi Elvin and David,

Thanks for the information.

I’ve uploaded the video to both vimeo and on my own site, but I cant seem to link it to my vimeo hosted video (I’m on the free plan – I’m not sure if this is possible on the free plan) I’m directing my HTML code to point to the hosted video on my own website at the moment.

Anyway, I’d just like to ask for some additional help:

1. On my home page, I decided to put a gradient background in the container of my text container so it’s easier to read when placed on top of the video hero section. I set it to 100% vh right now, but on some viewports (notably on mobile) the gradient appears and extends beyond the video. Is there a way to match the height of the video to this container?

2. My video plays on both mobile and desktop when viewing it on Chrome developer options, but when I check it out on my phone, it appears as a still image.
Is there a way to set it to play on mobile as well? Or would it be possible to alternatively set a still image for mobile to help with faster load times?

3. On desktop, my company logo (top left) defaults to having a blue background, but I can’t find anywhere in “Appearance > Customize” to change this to be transparent. Any idea on where I can change this? Also to change it to a blue version of the logo when on the sticky navigation further down the page?

[David]

I’ve uploaded the video to both vimeo and on my own site, but I cant seem to link it to my vimeo hosted video (I’m on the free plan – I’m not sure if this is possible on the free plan) I’m directing my HTML code to point to the hosted video on my own website at the moment.

You will need a paid plan to get the direct URL from vimeo.

1. you can switch to the Mobile tab and change the min-height from 100vh to a different value.

2. You can add a static image called a post image in your HTML – just swap out the URL/TO/poster.jpg :

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">

3. You already have this CSS which is doing a few things including adding the blue background-color:

.navigation-branding, 
.mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
    padding-left: 24px;
    padding-right: 24px;
    background-color: var(--accent);
    margin-left: 0;
}

If all of your other logo colors are working correctly then add this CSS:

.main-navigation:not(.is_stuck) .navigation-branding {
    background-color: transparent;
}

This will just remove the blue background when the navigation isn’t sticky on desktop.

[Roberto]

Hi, I’ve been looking for some help on this topic.

I’m having issues with Hero video loading. I’ve followed the GP guidelines on embedding <video> but for some reason it seems to load and auto play a snippet of the video and then stalls for a moment where it then gets to play back the video. The video is not that big (3-4mb). The video is self hosted on AWS lightsail (no shared hosting) and I assume should run smooth for the small amounts of requests. Wondering if I’d need embed (Vimeo Pro) or if there is way to make it runs smooth hosting it.

[Fernando]

Hi Roberto,

Can you open a new topic and share the link to where we can see this issue?

[Author]

Posts