Search code examples
javascriptjqueryvideoplaybackmute

How to mute a looped background video

I am using the Wallpaper plugin to loop a video in the background of a div. The idea is to have a video loop in a background of a div on mute. On hover, the video will have sound.

I couldn't find documentation or ways to mute. Any thoughts? I have tried to mute by adding the lines after the plugin is initialized --

$("video").prop('muted', true);
$("video").attr('muted', 'muted');
Solution

  • I have not seen a reference to the volume of the video in the documentation of the plugin. However, in an html compliant browser, it can be easily muted by

    1. Asserting the muted property
    2. Setting the volume property to 0

    You can do it on the video elements or on the jQuery wrapper.

    $('video').prop('volume', 0)
$('video').prop('muted', true)

    Since the video elements in your document are created by the wallpaper plugin, you should set the volume or muted property after these have been appended to the DOM. It should not be necessary, but in case of problems you could try setting an event handler for the wallpaper.loaded event.

    $('your selector').wallpaper({
   //... initialization parameters
}).on('wallpaper.loaded', function(){
  $('video', this).prop('muted', true);
});