How to disable iframe using jQuery or CSS?

Is there a way to mute iframe sound using jQuery or CSS?

This is the iframe I need to disable

<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>
+4
source share
3 answers

Include this library on 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 a vimeo API call to set the volume to 0 after 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 an external library:

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

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

+8
source

, 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}', '*');
    }
});

, . iframe mute/unmute video:)

+3

HTML5 audio video.

iframe API, -, JS . , , - iframe .

W3C " " , , . , , , HTML:

iframe {
    volume: silent;
}
+1

All Articles