The Vimeo API; Or: Why postMessage rocks!

Transferring this over from my old blog to DEV.to... bear with me for any aberrations!

m going to try to keep this post short and sweet; because: A) It’s a quick overview B) Nobody reads the “fluff” of coding articles (because we’re usually looking for answers!)

Anyway, this post is to highlight the Vimeo JS API, it’s optional Froogaloop helper library (which I actually did NOT use) and creating a quick wrapper dedicated to Vimeo’s basic API functionality.

For this project, we needed to use both the YouTube and Vimeo APIs to take control of their iframes. The weird thing is, both of these companies decided to implement their API quite differently.

If you’re debating whether or not to use Vimeo or YouTube, I would actually suggest Vimeo, only because their API is a lot more straightforward (in my opinion) and it’s easier to get up and running with it. YouTube’s iframe API is sort of clunky and you have to hack a bit to get it working how you want. You also MUST include their JS, which is actually really irritating if you want multiple instances.

ANYWAY, let’s get on with it.

Now, Vimeo’s iframe API revolves around the really cool (and fairly recent) postMessage API that allows us to send events to a 3rd party iframe where they have their own event listeners! A really cool (and secure) way to execute cross-domain requests. We can actually set this up quite easily with Vimeo’s API!

First, you’ll want to make sure that your embedded url looks something like this:

<iframe id="iframe_video" src="https://player.vimeo.com/video/<VIDEO_ID>?byline=0&portrait=0&title=0&autoplay=0&badge=0&api=1&player_id=iframe_video"/>

I have some fancy parameters here (which are optional and can be found here), but the most important ones are api=1 (which enables the postMessage/JS API) and the player_id (which says “ok, I’ll correspond with the iframe with ID of “iframe_video”)

Let’s take a look at a quick code sample (as a full reference, here’s the wrapper I have created I have learned recently that this is out of date and no longer works, sadly):

    post: function(action, value) {
    var data = {
        method: action
    },
    $player = document.getElementById('iframe_video');

    // Just as a check to make sure value exists
    if (value) {
        data.value = value;
    }
        var url = $player.src,
        message = JSON.stringify(data);
        $player.contentWindow.postMessage(message, url);
    }

Ok, so there’s a bit we should go over.

params:

-action (required): the action you want Vimeo API to execute.Need a list? Here you go!

-value (optional depending on action): The value that is attributed to the action (for example, the action would be “seek” and the value would be a JSON object like:

{
 'seconds:'192.622',
 "percent":'0.527',
 "duration":'365.507'
 }

(BTW this is totally taken from the API docs)

Anyway, this is all fairly straight forward if you’ve used postMessage. Haven’t used postMessage? Check out David Walsh’s example!

Below is a quick demo of Vimeo’s postMessage API working in action :) (want to see the code behind it? Check out the jsFiddle)

This post is from September 2015 and may not be up-to-date, however I am transferring to Dev.to for historical reasons