How to mute a looped background video

Question

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');

Answer 1

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);
});

Answer 2

I would use the property muted="muted" to get the desired result, so long as there's only one video element on the page that will work just fine.

$("video").prop('muted', 'muted');

jsFiddle example

Edit

FYI I checked out the wallpaper plugin and saw that it did indeed do what I suspected which is create a video object. If you really wanted to get specific on what video does what you can use the element that wraps the video then the child video element such as:

$("#pluginElem > video").prop('muted', 'muted');