Pause Vimeo universal embed when hidden using jQuery

14,346

Solution 1

You need to add from one of the froogaloop libraries.

player=$f(document.getElementById('tide'));// you can use jquery too: $('#tide')[0] 
player.api('pause');

Annoyingly simple. Here's an example on jsfiddle.net.

Solution 2

I wanted to add a play/pause button like this without using jquery or froogaloop. I don't know why but, I hate including a library when I don't have to. Especially for simple things like this.

Here's what I came up with (I'm just posting this for other people who are searching) :

<!DOCTYPE HTML>
<html>
<head>
    <title>Vimeo Test</title>
    <script language="JavaScript">
    var iFram, url;
    function startitup(){
        iFram = document.getElementById('theClip');
        url = iFram.src.split('?')[0];
    }
    function postIt(action, value) {
        var data = { method: action };
        if (value) {
            data.value = value;
        }
        if(url !== undefined){
            iFram.contentWindow.postMessage(JSON.stringify(data), url);
        }
    }
</script>
</head>
<body onload="startitup();">
<iframe id="theClip" src="http://player.vimeo.com/video/27855315?api=1" width="400"     height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>    </iframe>
<p><button onclick="postIt('play');">Play</button> <button     onclick="postIt('pause');">Pause</button></p>
</body>
</html>

Solution 3

Here's a simple way to pause a Vimeo video from an external HTML element that worked for me, using the froogaloop libray:

var iframe = $('.video')[0];
var player = $f(iframe);
$('.button').bind('click', function() {
    player.api('pause');
});

14,346

technopeasant

Asking obvious questions.

Updated on June 04, 2022

Comments

technopeasant almost 2 years
I have a Vimeo video (via universal embed iframe) hidden on my page. Clicking a link fades it in, and clicking outside of the video (lightbox-style) fades it out and hides it - but the video keeps playing. I read on Vimeo's API that you can use JSON objects to pause the video, but I don't understand what they're saying.

HTML:
```
<img id="show_tide" class="vid" src"#">
<i<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?portrait=0&amp;color=ffffffapi=1" width="726" height="409" frameborder="0"></iframe>
```
JavaScript:
```
$('#underlay').click(function() {
    //pause VISIBLE (there are multiple) Vimeo video via API
    $('.vim, #underlay').fadeOut(400);
});
```
technopeasant about 13 years

@Khez updated the jsfiddle with my code. works there.. but doesn't work within the page. do you see anything that could be conflicting? jsfiddle.net/CVWtL/11
technopeasant about 13 years

@Khez the video does not pause on my page. i'm using the function I pasted in to the jsfiddle. For the life of me can't figure out why it isn't working ://
technopeasant about 13 years

@Khez updated the jsfiddle again, this time with the other functions i'm using. all are dynamic.. maybe there's some cross over somewhere. jsfiddle.net/CVWtL/13
Khez about 13 years

This is gonna be dumb but... what element does $('.vim')[0] return? is it the iframe? or something else ?
technopeasant about 13 years

@Khez it returns the vimeo player. i used a class because there are several videos. do i need to add a selector like :visible to narrow it down to only the active video?
technopeasant about 13 years

@Khez too weird.. dropped in another video on the jsfiddle. video one pauses appropriately, video two does not. jsfiddle.net/CVWtL/16
technopeasant about 13 years

ughhh RATS! still not working with the corrected & jsfiddle.net/CVWtL/17 and still not working locally or hosted! barf!
Khez about 13 years

You do realize you need to add code for the second player? jsfiddle.net/Khez/CVWtL
technopeasant about 13 years

@Khez... ahahahaha no, I didn't. Numbers from 0 - infinity? any particular syntax? that handles both videos pausing on the jsfiddle, still not working in the context of my page. I'm scouring it and can't find what it could be. Driving me nuts.
Khez about 13 years

Either make a new question, give more code or try harder... I'm gonna disappear soon.
technopeasant about 13 years

@Khez I hear you. Trying hard. Here's all the code: minimalpluscreative.com/newclients/danielgomes
Khez about 13 years

You didn't include the correct froogaloop.js minimalpluscreative.com/newclients/danielgomes/scripts/…
technopeasant about 13 years

@Khez. I dont even want to talk about it. You're a hero.
iwasrobbed over 12 years

@Khez: +1 for the jsfiddle example