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 the sound is just plain annoying. So I need to find a way to mute the audio within the code for the embed. I have googled it but can't seem to find anything legible. As you can see from my code below, I have used the autoplay command within the link I was hoping I could do a similar thing to mute the sound.

    <iframe 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>

Thanks

check this [link](http://www.digital-results.com/tweaking-the-settings-on-a-vimeo-embed/) — turtle, Oct 30 '14 at 09:56
@turtle thanks so much but I already found that and it didn't work, thats why I'm here. Thanks for trying though its much appreciated — DanielNolan, Oct 30 '14 at 10:38

score 51 · Answer 1 · answered Jan 12 '16 at 11:46

51

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>

answered Jan 12 '16 at 11:46

toby1kenobi

1,609
1
14
24

7

This only works for videos uploaded by a Plus account unfortunately. – Reed Martin Apr 07 '16 at 00:26

score 21 · Answer 2 · answered May 22 '18 at 19:26

For non-paying members

You just need to add the muted parameter. E.g.:

<iframe src="https://vimeo.com/48400332?autoplay=1&loop=1&muted=1" ></iframe>

For paid members

According to Vimeo, the background parameter is only supported for videos hosted by paid members.

Source: https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos

score 19 · Answer 3 · edited Mar 15 '18 at 11:47

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>

i'm getting this error after applying the above script "Uncaught (in promise) Error: An id or url must be passed, either in an options object or as a data-vimeo-id or data-vimeo-url attribute.(…)" — Karthickeyan, Nov 21 '16 at 13:38

score 13 · Answer 4 · answered Oct 23 '15 at 07:52

I tried the examples in the answers with no luck. After looking into the documentation I noticed there is missing the parameter &player_id=IFRAME_ID. Maybe something changed in the Vimeo API, anyway the following example works for me:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="//player.vimeo.com/video/4415083?api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script>
$(function() {
    var vimeo_iframe = $('#vimeo_player')[0];
    var player = $f(vimeo_iframe);

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

I had attempted EVERY possible permutation with no luck until I found this answer. And it worked like a charm. Definitely there is something with the `&player_id=IFRAME_ID` option that makes it work. — Alberto Alexander Rodriguez, Jul 20 '16 at 23:37
works well, although I'm not sure why did you add ajax script? When using this solution, don't forget to change the bits after the video, in this case ```api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff``` — Anvar Turobov, Oct 18 '16 at 11:46

score 13 · Answer 5 · answered Aug 07 '16 at 14:36

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

Working perfectly. Just a little note: It's not necessary to wait until the player is ready to call setVolume(0) — oncode, Oct 26 '17 at 09:50

score 9 · Answer 6 · answered Dec 29 '17 at 07:53

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.

Oh boy, I just logged in to upvote your solution. I implemented it as it is in Shopify and BIM ! It works. Thank you so much. — Johnrednex, Jan 06 '18 at 00:12

jonnglass · Answer 7 · 2015-10-01T00:19:35.533

@Gadss answer works great but I found that you need update the iframe src to include the activation of the Vimeo api. Just include api=1 after the vimeo id.

I've also found that this sometimes doens't work on Safari for some reason.

<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?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>
    <script>
    var iframe = $('#vimeo_player')[0],
        player = $f(iframe),
        status = $('.status');

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

jake · Answer 8 · 2017-03-16T21:44:10.827

**Here is my solution: http://jsfiddle.net/jakeoblivion/phytdt9L/5/

(You will need your own play/pause mute/unmute icons)

  //load video muted
  var video = $("#myvideo");
  video.vimeo("play");
  video.vimeo("setVolume", 0);

    //toggle play/pause
  $('#play-pause').click(function() {
    $(this).toggleClass('play');
    if ($(this).hasClass('play')) {
      //pause video
      video.vimeo("pause");
      $(this).css('background', 'pink');
    } else {
      //unpause video
      video.vimeo("play");
      $(this).css('background', 'blue');
    }
  });

  //toggle mute/unmute
  $('#mute-unmute').click(function() {
    $(this).toggleClass('mute');
    if ($(this).hasClass('mute')) {
      //unmute video
  video.vimeo("setVolume", 1);
      $(this).css('background', 'green');

    } else {
      //mute video
  video.vimeo("setVolume", 0);
      $(this).css('background', 'red');
    }
  });

Spent ages trying and nothing seemed to work to.

I just wanted to have a Vimeo autoplay muted (volume 0) with simple Play/Pause Mute/Unmute controls, instead of their default ones. (feel free to use icons instead of the temporary colours I put).

(if you want to add the default controls back but keep muted, remove "?background=1". By default background=1 will set video.vimeo("setVolume", 0) and hide controls, so I also added the mute on load without the background=1 set).

Also note: "You’ll need to be running on a web server instead of opening the file directly in your browser. JS security restrictions will prevent the API from working when run locally."

Vimeo have changed their api, so instead of the other examples with .api("setVolume", 0); it is now: .vimeo("setVolume", 0); — jake, Feb 28 '16 at 11:49
Exactly what i was looking for. However you should update your code according to the new API — Aslam, Nov 04 '16 at 06:37

score 2 · Answer 9 · answered Nov 21 '18 at 14:47

I've found a way to do it. You start the video muted so it autoplays, then on the first timeupdate you set the volume to 1.

var options = {
    id: 'video_id_here',
    width: 640,
    loop: false,
    muted: true,
    autoplay: true
};

var player = new Vimeo.Player('vimeo', options);

player.setVolume(0);

player.on('timeupdate', set_autoplay_volume );

function set_autoplay_volume(){
    player.setVolume(1);
    player.off('timeupdate', set_autoplay_volume );
}

This is the reverse of OP's question but did help me so upvoted, thanks! — Michael Paccione, Jun 15 '21 at 02:57

score 2 · Answer 10 · answered Aug 16 '19 at 08:48

2

You try insert ?muted=1 after link in attribute src

For example

<iframe id="vimeo_player" src="https://player.vimeo.com/video/257992348?muted=1">

answered Aug 16 '19 at 08:48

Huynh Thai Hung

91
1
3

score 1 · Answer 11 · answered Feb 04 '16 at 20:59

1

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

answered Feb 04 '16 at 20:59

Pavelescu Razvan

77
2
9

score 1 · Answer 12 · answered Sep 10 '18 at 07:25

<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

Muting an embedded vimeo video

12 Answers12

For non-paying members

For paid members

Linked