Show element when Vimeo embed finishes

Question

I'm embedding a Vimeo video on my page dynamically with the following snippet:

<iframe id="singlepage"src="http://player.vimeo.com/video/<?php the_field('vimeo_id'); ?>?api=1&player_id=singlepage&color=ffffff" width="1000px" height="532px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

I want to display an element containing related videos, but only when the embedded video finishes. I've hidden the element using display:none, when the video finishes I want to add a class to show that element.

Here's what I'm using to play the video when the trigger button is clicked:

function post(e, t) {
    var n = {
        method: e
    };
    if (t) {
        n.value = t
    }
    f[0].contentWindow.postMessage(JSON.stringify(n), url)
}
var f = $("iframe"),
    url = f.attr("src").split("?")[0];
$("#play-video").click(function () {
    post("play")
});
$("button").on("click", function () {
    post($(this).text().toLowerCase())
})

How could I adapt this to listen for the end of the video and display an element?

Here's a basic fiddle detailing what I have so far: http://jsfiddle.net/GxwEX/154/

Answer 1

Final code: ;)

function onMessageReceived(e) {
    var data = JSON.parse(e.data);

    if (data.event === 'ready') {
        post('addEventListener', 'play');
        post('addEventListener', 'pause');
        post('addEventListener', 'finish');
    } else if (data.event === 'finish'){
        $( ".related" ).addClass( "show" );
    }
}

if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
} else { // IE
    window.attachEvent('onmessage', onMessageReceived, false);
}

(your) DEMO