[Support request] Video on header doesn't play with sound

Home Forums Support [Support request] Video on header doesn't play with sound

Home Forums Support Video on header doesn't play with sound

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1224593
    Alberto

    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?

    #1224748
    David
    Staff
    Customer Support

    Hi there,

    Most mobile devices blocks auto play videos unless they are muted.

    #1225207
    Alberto

    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

    #1225434
    David
    Staff
    Customer Support

    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

    #1237087
    Alberto

    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

    #1237214
    David
    Staff
    Customer Support

    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.

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