Volume Control Button Disappears on Mobile Devices

Beaver Builder
1

Hi everyone,

I’ve enabled the display controls for a video, including the volume (and mute) button. However, the volume button is removed on mobile devices, like smartphones and tablets. The only way to see the volume button is by setting the browser to desktop view. Since the video auto-plays but starts muted, I need the volume button to appear so users can unmute it if they want.

Is this normal behavior for smartphone browsers, or is it something specifically programmed into the Beaver Builder video plugin?

NOTE: A similar issue has been posted here but hasn’t received any responses: Video without audio in mobile version - Chrome, Firefox, etc.

Any insights would be greatly appreciated!

Thanks in advance!

1 Like
2

EXACT SAME ISSUE AS OF JANUARY 2026. Have you received response or found a solution somewhere else?

3

We finally decided to use an HTML component with the following code:

<video controls loop autoplay muted 
 poster="/wp-content/uploads/2026/01/your-thumbnail.jpg" 
 id="myVideo" style="display:block; width:100%; margin:0px;">
  <source src="/wp-content/uploads/2026/01/your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<div style="margin-top:20px;text-align:center;">
    <button id="myBtn" onclick="myFunction()">Pause</button>
    <button id="muteBtn" onclick="toggleMute()">Unmute</button>
</div>
<script>
    let video = document.getElementById("myVideo");
    let btn = document.getElementById("myBtn");
    let muteBtn = document.getElementById("muteBtn");

function myFunction() 
{
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}

function toggleMute() 
{
  if (video.muted) {
    video.muted = false;
    muteBtn.innerHTML = "Mute";
  } else {
    video.muted = true;
    muteBtn.innerHTML = "Unmute";
  }
}
</script>

Regards.