Pause Vimeo universal embed when hidden using jQuery

Question

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);
});

Are you sure you want to use the iframe mode? It will mean the buttons won't work on some browsers... — Khez, Apr 08 '11 at 04:53
@Khez I'm aware, but it's the best option for a mobile friendly site. any idea how to code the weird json pause thing? — technopeasant, Apr 08 '11 at 05:01

score 18 · Accepted Answer · answered Apr 08 '11 at 05:11

18

You need to add from one of the froogaloop libraries.

JS

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

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

answered Apr 08 '11 at 05:11

Khez

10,172
2
31
51

@Khez updated the jsfiddle with my code. works there.. but doesn't work within the page. do you see anything that could be conflicting? http://jsfiddle.net/CVWtL/11/ – technopeasant Apr 08 '11 at 05:50
@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 Apr 08 '11 at 05:55
@Khez updated the jsfiddle again, this time with the other functions i'm using. all are dynamic.. maybe there's some cross over somewhere. http://jsfiddle.net/CVWtL/13/ – technopeasant Apr 08 '11 at 06:03
This is gonna be dumb but... what element does $('.vim')[0] return? is it the iframe? or something else ? – Khez Apr 08 '11 at 06:09
@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 Apr 08 '11 at 06:11
@Khez too weird.. dropped in another video on the jsfiddle. video one pauses appropriately, video two does not. http://jsfiddle.net/CVWtL/16/ – technopeasant Apr 08 '11 at 06:17
ughhh RATS! still not working with the corrected & http://jsfiddle.net/CVWtL/17/ and still not working locally or hosted! barf! – technopeasant Apr 08 '11 at 06:37
You do realize you need to add code for the second player? http://jsfiddle.net/Khez/CVWtL/ – Khez Apr 08 '11 at 06:44
@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. – technopeasant Apr 08 '11 at 06:52
Either make a new question, give more code or try harder... I'm gonna disappear soon. – Khez Apr 08 '11 at 06:56
@Khez I hear you. Trying hard. Here's all the code: http://www.minimalpluscreative.com/newclients/danielgomes/ – technopeasant Apr 08 '11 at 07:03
You didn't include the correct froogaloop.js http://www.minimalpluscreative.com/newclients/danielgomes/scripts/froogaloop.js – Khez Apr 08 '11 at 07:08
@Khez. I dont even want to talk about it. You're a hero. – technopeasant Apr 08 '11 at 07:13
@Khez: +1 for the jsfiddle example – iwasrobbed Sep 22 '11 at 18:00

score 5 · Answer 2 · answered May 06 '13 at 17:27

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>

score 1 · Answer 3 · answered Jul 03 '12 at 17:35

1

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');
});

answered Jul 03 '12 at 17:35

Robert Pessagno

519
2
7
19

score 0 · Answer 4 · edited Jan 15 '17 at 02:42

I'm a little late to the party, but I had to load froogaloop, jquery, and the Vimeo API also.

be sure to append ?api=1&player_id='frame' to the end of your embedded video link

My code looked something like this after

<iframe id="frame" src='http://player.vimeo.com/video/199114019?api=1&player_id='frame''></iframe>

$(document).ready(function() {
    $('.nameofyourclass').click(function() {
      $f($('#frame')[0]).api('pause');
    });
});

Pause Vimeo universal embed when hidden using jQuery

4 Answers4

Linked