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/

Answer 1

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.