A way to mute an iframe using jQuery or CSS?

Question

Is there a way to mute the audio of an iframe using jQuery or CSS?

This is the iframe I need to mute

<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Answer 1

Include this library in your page: https://github.com/vimeo/player-api/tree/master/javascript like this

<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>

This code will send an API call to vimeo player to set the volume to 0 once the player is ready, based on http://developer.vimeo.com/player/js-api

// you may need another way of getting reference to the iframe:
var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );

 player.addEvent('ready', function() {
     player.api('setVolume', 0); 
 });

http://jsfiddle.net/87dsjL8q/

Or, without the external library:

iframe.contentWindow.postMessage('{"method":"setVolume", "value":0}','*');

http://jsfiddle.net/87dsjL8q/1/

Answer 2

Here you are with a button based on previous answers http://jsfiddle.net/qumg6e7h/

$('button').on('click', function () {
    var iframe = $(this).prev('iframe')[0];

    if ($(this).hasClass('mute')) {
        $(this).removeClass('mute').text('Mute');
        iframe.contentWindow.postMessage('{"method":"setVolume", "value":1}', '*');
    } else {
        $(this).addClass('mute').text('Unmute');
        iframe.contentWindow.postMessage('{"method":"setVolume", "value":0}', '*');
    }
});

You can have as many iframes as you like. Just add the button after the iframe and on click mute/unmute the video :)

Answer 3

You can only mute HTML5 audio and video elements.

An iframe does not have an audio API, so you can't mute anything using JS on that element. If you can find a workaround to the restrictions from the same-origin policy, you maybe can select the real audio or video element inside the iframe and mute that.

There is a W3C recommendation for “aural style sheets”, but I don't know how the browser support for that look like. Using those properties you probably could mute any HTML element:

iframe {
    volume: silent;
}