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/
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.