Vimeo embed auto mute on load

Question

I have a vimeo embedded video but cant seem to integrate the mute on load.

Here is my video code

<div id="vimeo"> </div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

and the js using

 <script>
// URL of the video 
        var videoUrl = 'http://www.vimeo.com/76979871?api=1?player_Id=vimeoyo';

        var endpoint = 'http://www.vimeo.com/api/oembed.json';
        var callback = 'embedVideo';
        var url = endpoint + '?url=' + encodeURIComponent(videoUrl)+ '&autoplay=true' + '&callback=' + callback + '&width=420';
        function embedVideo(video) {
            document.getElementById('vimeo').innerHTML = unescape(video.html);
        }
        function init() {
            var js = document.createElement('script');
            js.setAttribute('type', 'text/javascript');
            js.setAttribute('src', url);
            document.getElementsByTagName('head').item(0).appendChild(js);
            var player = 'vimeoyo';
            player.api('setVolume', 0);
        }


        window.onload = init;


  </script>

The issue im having also is that the video isn't an iframe.

Edit: There is an answer to mute using an iframe. here

Muting an embedded vimeo video

But having tested that using this fiddle, it also doesnt seem to mute the video. http://jsfiddle.net/serversides/gfcpjLsy/

Did you try playing different values for `player.api('setVolume', 0);` on the `js` file? — Tushar Khatiwada, Sep 17 '15 at 16:15
I have tried but I can't get any of the api to work even though I have put in ?api=1 into the video URL. — ServerSideSkittles, Sep 17 '15 at 16:17
When it comes to `froogaloop` there are two important things: give your `iframe` an `id`, and add that to the Vimeo src url as `player_id=%%ID%%` and also include `api=1` in that URL string. Also, where is your iframe? It is not added with JS nor in your HTML... — somethinghere, Sep 17 '15 at 16:27
JSFiddle wont load the code for the oEmbed example. However there is this at the most basic level http://jsfiddle.net/serversides/gfcpjLsy/ this was taken from another SO question and yet it doesnt mute either. — ServerSideSkittles, Sep 17 '15 at 16:43

score 1 · Accepted Answer · answered Sep 17 '15 at 17:11

Since you're dinamically creating the iframe from the vimeo api, you should only set the volume after the iframe is loaded. So, in your embedVideo function, after you insert the HTML into your div, you must get the first child of the div (it's the iframe), and you add an onload event to it.

After the iframe is loaded, then you must use the froogaloop's $f function to encapsulate the iframe into its library, and then you can use the api method to set the volume to zero.

In your example, you were trying to call the api method in a string, and it would never work.

function embedVideo(video) {
  var div = document.getElementById('vimeo');
  div.innerHTML = unescape(video.html);

  var ifr = div.firstChild;
  ifr.addEventListener('load', function(e) {
    var player = $f(ifr);
    player.api('setVolume', 0);
  });
}

function init() {
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', url);
  document.getElementsByTagName('head').item(0).appendChild(js);
}

I've created a plnkr for you, with your example working.

Thankyou thats awesome! Was racking my brain for ages trying to work out why it wasn't muting! — ServerSideSkittles, Sep 17 '15 at 17:31

score 1 · Answer 2 · answered Feb 28 '16 at 11:54

**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', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/play.png") no-repeat');
    } else {
      //unpause video
      video.vimeo("play");
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/pause.png") no-repeat');
    }
  });

  //toggle mute/unmute
  $('#mute-unmute').click(function() {
    $(this).toggleClass('mute');
    if ($(this).hasClass('mute')) {
      //unmute video
  video.vimeo("setVolume", 1);
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/volume.png") no-repeat');

    } else {
      //mute video
  video.vimeo("setVolume", 0);
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/mute.png") no-repeat');
    }
  });

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.

(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. Flash and JS security restrictions will prevent the API from working when run locally."

http://www.taxidermyart.co.uk

Vimeo embed auto mute on load

2 Answers2