endle

endle

I need a pause button that will pause all vimeo videos on a page. I am able to get all the buttons working from the example files and site, but the one thing blocking me is that the iframes from the oembedded videos do not have an id. If I hard-code the id in to match the player_id everything will work....so I am wondering if there is a way to sort of bypass having to look at the id of every player and instead just have a button that targets all players on the page?

This button will suffice for what I need it to do. Can anyone help me?

Brad Dougherty

Brad Dougherty Staff

You should be able to just select all Vimeo iframes on the page and loop through and call the pause function on them. If that's all you're doing, there shouldn't be a need to assign an id to them.

endle

endle

can anyone give me a quick example of how to do that?

endle

endle

I am so close I can see lights at the end of the tunnel. The following script and buttons will play and pause the first video. I need a loop to make this see all of the videos..and then change the script to just a class rather than a button to send the pause signal.

button>play button>pause

var f = $('iframe'),
url = f.attr('src').split('?')[0];

// postMessage
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f[0].contentWindow.postMessage(JSON.stringify(data), url);
}

// Play & Pause
$('button').click(function() {
post($(this).text());
});

if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
} else { // IE
window.attachEvent('onmessage', onMessageReceived, false);
}

endle

endle

Okay. Solved with the help of a JS coder. Here is for anyone else who just needs a universal play or pause button that will work on all videos on a page. You can set any element with the class of .playAllVimeo or .pauseAllVimeo to use as a button. This is useful if you have a slider or something where you need the video to pause when you perform an action (like sliding to the next video)

//HERE IS THE SIMPLE CODE THAT WORKS
var f = $('iframe'),
url = f.attr('src').split('?')[0];

// postMessage
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}

f.each(function(){this.contentWindow.postMessage(JSON.stringify(data), url);});
}
// Play & Pause
$('.pauseAllVimeo').click(function() {
post('pause');
});
$('.playAllVimeo').click(function() {
post('play');
});

if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
} else { // IE
window.attachEvent('onmessage', onMessageReceived, false);
}

Matthew Ferry

Matthew Ferry

I know this thread is long dead, but in case you check up on this, are you getting "unable to post message" errors on each click event? I implemented a version of your code above and am getting errors on each .pauseAllVimeo clicks.

This conversation is missing your voice. Please join Vimeo or log in.