Search code examples
javascriptphpwordpress

How to mute all video and audio in wordpress

I have a lot of videos on my e-commerce website all playing at the same time with audio enabled. I have to mute all videos by default to increase the quality of the user experience.

Solution

  • To mute all videos by default, we hook the creation of a JavaScript function to the footer.

    Every time your theme builds it's footer, the script JavaScript is added to the DOM. The script than selects all the video elements and mutes them recursively.

    So, go to the Wordpress Admin page, select Appearance > Theme Editor. On the right side of the page you should see functions.php. Click on it and add the following code at the bottom of the page:

    # mute all videos by default
function mute_all_videos() {
?>
<script type="text/javascript">
  [].slice.call(document.querySelectorAll('video')).forEach(function(audio) {
        audio.muted = true;
  });
</script>
<?php
}

# hook to footer
add_action( 'wp_footer', 'mute_all_videos' );