[Support request] Background video hero problems loading

[Guillermo]

Hi,
I followed this tutorial to use a video as background on a hero section but I’m having some issues.
For some resasons the video doesn’t start when I access to the site. Well, sometimes it does, sometimes it doesn’t which is worst. If I reload using F5 or directly from https://arcillasoliete.com/ , the video doesn’t, but If I click on the logo it start.

This is the code I’ve used for the element:

<video loop autoplay preload playsinline poster="https://arcillasoliete.com/wp-content/uploads/2022/09/ImagenCargando_SinLogo.resized.webp" class="background-video">
   <source src="https://arcillasoliete.com/wp-content/uploads/2022/09/ArcillasOliete2022_MinasCorto2.mp4" type="video/mp4">
</video>

Many thanks.

[David]

Hi there,

are you having the issue on any particular device or browser ? As its loading correctly on my mac and iphone.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Guillermo]

Hi,
I’ve tried with Firefox and works fine, so it has to be a problem with Brave (which is Chrome).

The weird think is that it works when I click on the logo, but not when I reload the page (F5 or reload button on browser) or access through url.

THanks.

[Ying]

Can you try disabling all your plugins except GP Premium and GB to test?

I feel like some code is blocking the loading of the video.

[Guillermo]

Hi,
I’ve disabled all plugins except GP Premium, GB and GB Pro and still not working.

Just in case, I’ve commented all code in functions.php as well and still not working.

Thanks.

[David]

If its only happening on Brave then it may be related to an Auto Play or Performance option in the browser settings.

Before asking the Brave community for support ( there are a few similar topics on their forum ), can you try removing the preload attribute from the Video HTML.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Guillermo]

Hi,
apparently, as you said, is something related with video attributes.
I can’t figured out why, but I added the attribute muted and everyting works fine.

This is how it looks the code:

<video loop muted autoplay preload playsinline poster="https://arcillasoliete.com/wp-content/uploads/2022/09/ImagenCargando_SinLogo.resized.webp" class="background-video">
   <source src="https://arcillasoliete.com/wp-content/uploads/2022/09/ArcillasOliete2022_MinasCorto2.mp4" type="video/mp4">
</video>

Thanks for your help.

[David]

Sorry i missed that lol – yes, the muted property is a requirement for most browsers to autoplay.

Glad to hear you found the issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts