Archived topic
Background video hero problems loading
7 replies · Started by Guillermo on September 16, 2022
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.
Hi there,
are you having the issue on any particular device or browser ? As its loading correctly on my mac and iphone.
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.
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.
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.
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.
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.
Sorry i missed that lol - yes, the muted property is a requirement for most browsers to autoplay.
Glad to hear you found the issue.
