CODEWITHSUNDEEP
javascriptjqueryvimeo
Justin Meltzer
Justin Meltzer

Reputation: 13558

How to stop a Vimeo video with jQuery

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?

Upvotes: 44

Views: 55497

Answers (8)

Derlis Gonzalez
Derlis Gonzalez

Reputation: 1

You have to remove and put the src back on.

    $('#helpVideo').on('hidden.bs.modal', function () {
        video_src = $('iframe').attr('src')
        $('iframe').attr('src',video_src)
    })

Upvotes: 0

trushkevich
trushkevich

Reputation: 2677

Using the Vimeo JavaScript API, it can be done with:

player.unload()

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

Upvotes: 1

pirios
pirios

Reputation: 121

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

Upvotes: 6

johna
johna

Reputation: 10772

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

Upvotes: 19

Deborah
Deborah

Reputation: 4575

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

Upvotes: 62

user2194405
user2194405

Reputation: 61

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

Upvotes: 4

Michelle Tilley
Michelle Tilley

Reputation: 159135

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.

Upvotes: 12

Nathan J
Nathan J

Reputation: 31

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.

Upvotes: 3

Related Questions