Muting an embedded vimeo video

Question

On a website I am building I have a vimeo video embedded. The client needs to keep the sound on the video obviously for people that find it on vimeo. However for her website

Answer 1

Since most of the answers here are referring to Vimeo's old api. Here is the simplest way with the new api. You can include vimeo player.js from their CDN or you can download it or you can include it from npm.

<script src="https://player.vimeo.com/api/player.js"></script>

or

npm install @vimeo/player

then you can do the following.

    <script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.setVolume(0);
  </script>

that's it. And if you are using angular 2+,

import * as Vimeo from '@vimeo/player';

const iframe = e.target;
const player = new Vimeo(iframe);
player.setVolume(0);

here e.target is $event which would be passed from the template. Probably it could be iframe (load) event. Or may be you can use jquery to select iframe.

Answer 2

Seems like Vimeo is providing an updated library, and the API syntax is a bit different from the old one (Froogaloop). Here's how to mute an embedded video with JS:

<!--Add the id attr to the iframe tag to use as a selector-->
<iframe id="embeddedVideo" src="http://player.vimeo.com/video/4415083? title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<!--Include the Vimeo API Library-->
<script src="https://player.vimeo.com/api/player.js"></script>

<!--Select and manipulate your video-->
<script type="text/javascript">
    //Select the #embeddedVideo element
    var video = document.getElementById('embeddedVideo');

    //Create a new Vimeo.Player object
    var player = new Vimeo.Player(video);

    //When the player is ready, set the volume to 0
    player.ready().then(function() {
        player.setVolume(0);
    });
</script>

Hope this helps out anyone who's using the new library. Documentation is at vimeo/player.js

Answer 3

This is the only way it worked for me: http://jsfiddle.net/87dsjL8q/108/

var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );

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

Answer 4

In case it helps anyone, Vimeo have added a 'background' parameter for embedding videos, that autoplays videos silently. In some cases that will be useful where people want to mute videos - this is their example:

<iframe src="https://player.vimeo.com/video/76979871?background=1" 
    width="500" height="281" frameborder="0" webkitallowfullscreen 
    mozallowfullscreen allowfullscreen></iframe>

Answer 5

you will be using setVolume api in your vimeo.. player.api('setVolume', 0); it will be like this...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
        <iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1&player_id=vimeo_player" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        <script>
        var iframe = $('#vimeo_player')[0],
            player = $f(iframe),
            status = $('.status');

            player.addEvent('ready', function() {
                player.api('setVolume', 0);
            });
        </script>

Answer 6

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

you can just give "muted=1" so the video will be muted... chrome allow the videos autoplay that are muted