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=";title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

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>

• javascript
• iframe
• vimeo
• mute
• vimeo-api

• You didn't search enough! Read it here developer.vimeo.com/player/js-api – Bojan Petkovski Commented Oct 30, 2014 at 13:47
• Hi @BojanPetkovski I have tried this all day and nothing. Also other forums have said that you can not do it through any vimeo api and it has to be code targeting the actual iframe and not the video. Thanks though Ill keep trying – DanielNolan Commented Oct 30, 2014 at 13:50
• @BojanPetkovski Yes, there is an API for Vimeo, but you can't use it from a parent document targeting an iframe because of the same-origin policy. – feeela Commented Oct 30, 2014 at 13:52
• 1 @feeela you can use it, it's kind of the point of exposing an API, isnt it? The API is based on window.postMessage and works just fine cross-origin, see fiddle links in my answer below :) – pawel Commented Oct 30, 2014 at 14:06
• OK, never heard about Window.postMessage. Cool, today I've learned something new… – feeela Commented Oct 30, 2014 at 14:10

3 Answers 3

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/

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 :)

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