Changing a scene when a Vimeo video has ended

Here are the steps you can use to change a scene (or run other actions) when a video hosted on vimeo has ended:

1: On the video page, click the ‘share’ paper airplane icon shown when hovering over the video.

2: Copy the Embed code show, for example:

<iframe src="" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="">Star Wars Uncut - Scene 113 - &quot;Hello there&quot;</a> from <a href="">Malcolm Sutherland</a> on <a href="">Vimeo</a>.</p>

3: Find just the src part:

4: Add “&api=1&player_id=vimeoplayer” to the end:

5: In Hype, create a new HTML Widget

6: In the Element inspector, change the HTML Widget option to Specified URL and paste the composed URL from step 4.

7: Go to the Identity Inspector and give the HTML Widget a Unique Element ID (for example, I am using “vimeoIFrame”

8: Add an On Scene Load action that is set to run the following JavaScript:


// this must be the unique element id of the HTML Widget in Hype
var playerIFrameID = "vimeoIFrame";

function onVideoFinished() {

	// do an action when the video is finished, such as changing scene:
	hypeDocument.showSceneNamed("Other Scene", hypeDocument.kSceneTransitionCrossfade, 1.1);


// do not modify below here  ------------------------------------

// Handle messages received from the player
window.onMessageReceived = function (event) {
	// Handle messages from the vimeo player only
	if (!(/^https?:\/\/ {
		return false;
	var data = JSON.parse(;
	if(data.event == "finish") {
	} else if(data.event == "ready") {  
		post('addEventListener', 'finish');

// Helper function for sending a message to the player
function post(action, value) {
	var data = {
		method: action

	if (value) {
		data.value = value;

	var message = JSON.stringify(data);
	document.getElementById(playerIFrameID).firstElementChild.contentWindow.postMessage(message, "*");

// Listen for messages from the player
if (window.addEventListener) {
	window.addEventListener('message', window.onMessageReceived, false);
} else {
	window.attachEvent('onmessage', window.onMessageReceived, false);


9: Modify the onVideoFinished function to show a different scene name or run a different action

10: Add an On Scene Unload action to run the following Javascript:


// unregister so handlers aren't called twice
if (window.removeEventListener) {
	window.removeEventListener('message', window.onMessageReceived);
} else {
	window.detachEvent('onmessage', window.onMessageReceived);


Here’s a sample document showing it in action: (75.0 KB)


vimeo also offers a javascriptlibrary for their player to simplify those postMessage-eventhandling. Api

Yep @h_classen they sure do.

Here is a post I made a while back showing both YoutubeAPI and vimeoAPI in use.

@jonathan nice example of use without froogaloop to handle post messages

1 Like