How to stop a Vimeo video with JQuery

Question

When I hide a youtube video, it stops playing. However, this is not the case for Vimeo videos. Is there another way to stop a Vimeo video?

Answer 1

First, add an ID to your iFrame. Then add this to your javascript close window click function:

var $frame = $('iframe#yourIframeId');

// saves the current iframe source
var vidsrc = $frame.attr('src');

// sets the source to nothing, stopping the video
$frame.attr('src',''); 

// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);

Answer 2

Vimeo has a JavaScript API that allows you to access and invoke many properties and methods on the video player (including pausing the video and also unloading it completely). They also have an API Playground and some examples on GitHub.

[Edit]

Since you mention that you use the Universal Embed Code, here are some caveats from the web site:

With the Universal Embed Code, the only way to interact with the player is by using window.postMessage. postMessage is a relatively new development, so it's oly available in the following browsers: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, and Opera 9+.

Because of the complexities involved with postMessage, we've written a JS mini-library that does all the hard work for you! You can find it on the downloads page or you can see some examples below.

Answer 3

to restore the SRC attribute use the following before clearing:

var source = $('iframe#yourVideoId').attr('src');

next SRC attribute clear:

$('iframe#yourVideoId').attr('src','');

callback previous SRC attribute:

$('iframe#yourVideoId').attr('src',source);

Answer 4

    var vidUrl = $("iframe#video-frame").attr('src');


    //Basically stops and starts the video on modal open/close
    $('#video').on('hidden.bs.modal', function (e) {
        $("iframe#video-frame").attr('src','');
    });

    $('#video').on('show.bs.modal', function (e) {
        $("iframe#video-frame").attr('src', vidUrl);
    })

Answer 5

Another answer along the lines of David's...you can use jQuery to clear the SRC attribute of the iFrame.

$('iframe#targetID').attr('src','');

I'm using this with a Vimeo video and a lightbox effect. When the lightbox is triggered again, I add the video URL back to the iFrame SRC before showing it.

Answer 6

Try using vimeo player API: http://developer.vimeo.com/player/js-api#methods

Remember to turn API on. eg: http://player.vimeo.com/video/VIDEO_ID?api=1

Answer 7

I recently needed to pause a Vimeo video that was inside a Bootstrap modal when the modal was closed.

The Vimeo video was embedded in an iframe.

This is what worked for me:

$("#my-bootstrap-modal").on('hidden.bs.modal', function (e) {
    var div = document.getElementById("my-bootstrap-modal");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"method":"pause"}', '*');
});

Answer 8

Using Vimeo javascript API it can be done with

player.unload()

https://github.com/vimeo/player.js#unload-promisevoid-error

Answer 9

I used jQuery to remove the iframe from the DOM.