Stop all vimeo videos

1

When I embed videos from vimeo, each video rectangle ID is different eg vimeoplayer1

I am then using this script to pause the video when the scene is exited or another event takes place, but can I rewrite this to stop many videos (with different unique IDs) in one go?

	var videoRectangle = hypeDocument.getElementById('vimeoplayer1')
		var iframe = videoRectangle.childNodes[0];
	var player = $f(iframe);
	player.api("pause");
2

I'd probably do something like look at the src of all iframes on the page, and find any that use "player.vimeo.com" URL.

// get all iframes in the scene
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var allIframesOnScene = sceneElement.getElementsByTagName("iframe");

// loop over each
for(var i = 0; i < allIframesOnScene.length; i++) {
	// filter out anything without player.vimeo.com in the src
	if(allIframesOnScene[i].src == null || allIframesOnScene[i].src.indexOf("player.vimeo.com") == -1) {
		continue;
	}
	
	// we have a vimeo iframe
	var iframe = allIframesOnScene[i];
	var player = $f(iframe);
	player.api("pause");
}
2 Likes
3

Thanks Jonathan, now to see if I can implement that :flushed:

4

Works beautifully Jonathan- one question…does it matter what the element ID is? seems to be working regardless of what its called

5

Great that it works!

You don't any need explicit IDs on the Hype elements if this is all you want to do. The code does a search for all iframes in the scene and then discovers the right ones based on their URL.

2 Likes
6

If I use this script and place the whole output inside another iframe, it stops working.
How do I modify it when using it in an iframe?

7

I'm a little unclear on your structure when you say the whole output inside another iframe; could you perhaps make a little outline that shows hierarchically where there's your hype documents, iframes, code, and vimeo embeds?

8

I ended up clearing the iframe which appears to have worked

1 Like
9

This solution works perfectly thanks @jonathan !!

2 Likes
10

Having the same issue @mikefrost any chance you might share your solution if you can?

Many thanks,

11

So this is the solution Ive use when the output is in an iFrame - I can't remember were I got this from

I put this in the head

Each instance of the video has a unique element ID like
vimeoplayer12

Then I create javascript for it

function pausevideo12(hypeDocument,element,event){

var videoRectangle = hypeDocument.getElementById('vimeoplayer12')


var iframe = videoRectangle.childNodes[0];

var player = $f(iframe);

player.api("pause");

}

3 Likes
12

Awesome thanks @mikefrost will try this out !

13

This doesn't appear to work anymore

14

you may post a simplified example showcasing your issue

15

Hi Hans
I had to remove the sensitive stuff - I trying to stop the vimeo video when the 'Text; button is pressed or when the scene is left
vimeo test.zip (57.6 KB)

16

hm ... i'd guess you need <script src="https://player.vimeo.com/api/player.js"></script> in the head.

then you can use @jonathan 's script (slightly changed)

	// get all iframes in the scene
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var allIframesOnScene = sceneElement.getElementsByTagName("iframe");

// loop over each
for(var i = 0; i < allIframesOnScene.length; i++) {
	// filter out anything without player.vimeo.com in the src
	if(allIframesOnScene[i].src == null || allIframesOnScene[i].src.indexOf("player.vimeo.com") == -1) {
		continue;
	}
	
	// we have a vimeo iframe
	var iframe = allIframesOnScene[i];
	var player = new Vimeo.Player(iframe);
	
	    player.on('pause', function() {
      console.log('paused');
    });
	
	player.pause();
}
2 Likes
17

Thanks Hans
I tried it but can't get it to work

18

I found this and it works but I don't know whether its the right solution or how to implement in hype

19

froogaloop (the library used in the codepen) is no longer official supported by vimeo ... as far as i know

///////////////

well, my exampleabove ..., it works for me though just tested with desktopbrowsers ... ?!
vimeo_pause_video_sceneunload.hype.zip (58,7 KB)

reference for the vimeoplayer => Vimeo

20

I downloaded the zip file but it doesn't work for me.