Controlling embedded Vimeo video using javascript

admin ·

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: