Archived topic
Video on header doesn't play with sound
5 replies · Started by Alberto on April 3, 2020
Hello
I've got a Header Element where I locate a video. This is the code:
<video loop muted autoplay poster="https://adrovello.es/wp-content/uploads/2020/01/poster.jpg" class="background-video">
<source src="https://adrovello.es/wp-content/uploads/2020/03/ruta_adro_vello.mp4" type="video/mp4">
</video>Everything is Ok, both in desktop and in mobile.
However if I remove the muted parameter
<video loop autoplay poster="https://adrovello.es/wp-content/uploads/2020/01/poster.jpg" class="background-video">
<source src="https://adrovello.es/wp-content/uploads/2020/03/ruta_adro_vello.mp4" type="video/mp4">
</video>then the video doesn't play in mobile. But if I change language (for example) then it plays. It's very extrange.
Any thoughts?
Hi there,
Most mobile devices blocks auto play videos unless they are muted.
Hi David
Thanks for replying!
What are the options?
Is there an easy way to let users turn on the sound?, maybe a way to play video muted on mobile and with sound on desktop?...
Whats the way with GP Elements?
Regards
The simplest way i can thing is to add the HTML Video element twice.
One for Desktop and one for Tablets and Mobile. Then use the hide-on-* classes to only display the relevant one for each device:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Hi David
I was trying as you suggest and it works. But I found a new problem: the video doesn't play in Chrome if it doesn't have the muted parameter. Is there an easy way to detect if the user is using Chrome?
Thank you
Using only CSS to detect browser is a bit hit and miss and prone to change as browsers update.
Found this method on Stackoverflow:
https://stackoverflow.com/a/54566117
But chances are it will also affect Safari as its detecting webkit support.
