Controlling embedded Vimeo video using javascript

We are embedding video from Vimeo on a site we are working on and wanted to change the behavior of playing a video so that it would go back to the first frame after the video was done playing, rather than staying on the last frame. Since it ended up being harder than expected and finding good documentation online was difficult, I thought I’d share my solution here.

First, in order to do this, you need to embed your video using the swfobject javascript library. Next, you have to create a div that has an id (swfobject requires you to pass an id string for its initialization) – this div will be replaced by swfobject with a video object. The convention we’re using is to use an id of video-XXX, where XXX is the id of the video in vimeo‘s system. Finally, the div needs to be given a size (using CSS) so that the embedded video will end up being the correct size.

The code is structured as a jQuery plugin, so of course you will need jQuery. However, there is not a strong dependency on jQuery so with a little restructuring, I’m sure the jQuery dependency could be dropped.

Here it is:

This entry was posted in Everything Else and tagged . Bookmark the permalink.

One Response to Controlling embedded Vimeo video using javascript

  1. eddie says:

    hey, is there any chance you could provide a working example of this? I’m a bit confused as to what the html looks like. Are there any changes on the embed?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>