Topic: Adding Optional Audio to Background Video

aaronmckeon
May 8, 2024 at 8:26 am

I have a video that plays as the background to the homepage, which I did by adopting code I found in the following documentation:

https://docs.generatepress.com/article/adding-a-background-video/

Can you tell me if you know of a way to add a button that allows the user to unmute the video? It’s muted by default but my client would like users to be able to play the audio. This would ideally a button that floats over the video in one of the corners.
Leo
May 8, 2024 at 10:32 am

Hi there,

Unfortunately, we are not aware of a solution for this.

You may need to research to see if a plugin is available for this.

If not then your best bet is likely to hire a developer using a service like Codeable (see bottom of this page) to create a custom solution for you:
https://generate.support/what-support-includes/

I hope this helps and thanks for your understanding.

aaronmckeon

May 8, 2024 at 11:55 am

I was able to figure out a solution. I added a button into the container that overlays the video, and then added a script to the custom HTML block.


<script>
document.addEventListener('DOMContentLoaded', function() {
    const video = document.querySelector('.am-background-video');
    const muteBtn = document.querySelector('.am-mute');

    muteBtn.addEventListener('click', function() {
        if (video.muted) {
            video.muted = false;
            muteBtn.textContent = 'Mute';
        } else {
            video.muted = true;
            muteBtn.textContent = 'Unmute';
        }
    });
});
</script>
<video loop muted autoplay poster="/wp-content/am-uploads/homepage-video.png" class="am-background-video">
    <source src="/wp-content/am-uploads/homepage-video.mp4" type="video/mp4">
</video>

And then a little CSS:


.am-mute {
	cursor: pointer;
}

Worked like a charm. Hope this is helpful.

— Aaron

Leo
May 8, 2024 at 12:01 pm

Thanks for sharing your solution!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding Optional Audio to Background Video