A way to mute an iframe using jQuery or CSS?

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>

Answers:

Answer

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.