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>

You didn't search enough! Read it here http://developer.vimeo.com/player/js-api — Bojan Petkovski, Oct 30 '14 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, Oct 30 '14 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](http://en.wikipedia.org/wiki/Same-origin_policy). — feeela, Oct 30 '14 at 13:52
@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, Oct 30 '14 at 14:06
OK, never heard about `Window.postMessage`. Cool, today I've learned something new… — feeela, Oct 30 '14 at 14:10
@feeela then you're in for a treat :) It opens great possibilities for cross-window communication. — pawel, Oct 30 '14 at 14:13

pawel · Accepted Answer · 2014-10-30T14:16:48.143

9

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/

edited Oct 30 '14 at 14:16

answered Oct 30 '14 at 14:00

pawel

35,827
7
56
53

this has been the most promising of the day but for some reason I still can not get it working please please please look here and see if you can tell me why? http://www.cambridgedesign.company/graphic.html – DanielNolan Oct 30 '14 at 14:14
@DanielNolan you have `Uncaught ReferenceError: $f is not defined`, which means you need to add the library, I've edited the answet to be more clear. – pawel Oct 30 '14 at 14:16
@DanielNolan then you have more than one `` on your page, the simplest solution would be to add an id attribute to it (for example `<iframe ...="" id="mute-this">`, then `var iframe = document.getElementById('mute-this')` in the JS. – pawel Oct 30 '14 at 14:20
you truly are lovely, and I did what you said and uploaded it online but still nothing. :( – DanielNolan Oct 30 '14 at 14:21
@DanielNolan move the script to the bottom of the page, now it executes when the iframe isn't there yet. – pawel Oct 30 '14 at 14:22
its made it worse, Im going to give up now but thanks for trying. this website stuff is just too hard. Thanks anyway – DanielNolan Oct 30 '14 at 14:32

score 3 · Answer 2 · answered Oct 30 '14 at 14:31

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

score 2 · Answer 3 · answered Oct 30 '14 at 13:50

2

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

answered Oct 30 '14 at 13:50

feeela

29,399
7
59
71

thanks for being DECENT about it, yeah Ive tried this too with no joy, it just seems that maybe it cant be done... maybe time to use youtube instead of vimeo! lol – DanielNolan Oct 30 '14 at 13:59
@DanielNolan That is a technical limitation of JS, not one of Vimeo vs. Youtube (At least Vimeo doesn't surprisingly delete or block you videos for no reason…) – feeela Oct 30 '14 at 14:08
Aural style sheets are for screenreaders and other accessibility tools http://stackoverflow.com/a/6607718/873565 – Kian Mar 29 '15 at 21:26

A way to mute an iframe using jQuery or CSS?

3 Answers3

Linked