How to build a Vimeo Video Element¶

First of all we need to clearify what we want to achieve with this Element.

Inserting videos on websites can be a hassle.
In order to simplify this process we want to build an Element that takes the Vimeo video ID and puts it on the site (XHTML valid) using SWFObject.

Lets get started!

create the folders "elements/vimeo" in your mysite directory

in the folder "vimeo" create a file called "VimeoElement.php"

open the file and start:

<?php

class VimeoElement extends Element {

}

?>

In order to save information required we make use of the powerful database functions provided by sapphire:

we need to store

$video id => Integer - video Id
$height => Integer - height of the video
$width => Integer - width of the video
$thumbnail => Varchar(100) - url of the thumbnail image (as alternate content)

so we put it in the code (note: we are setting some default measurements)

    static $db = array(
        "video_id" => "Int",
        "height" => "Int",
        "width" => "Int",
        "thumbnail" => "Varchar(100)" 
    );

    static $defaults = array(
        "width" => 640,
        "height" => 512
    );

now we construct the cms fields (note the checkbox!)

function getCMSFields() {
        return new FieldSet(    
            new NumericField("video_id", "Video ID", $this->video_id),
            new CheckboxField("autoSettings", "Retrieve Settings"),
            new NumericField("width", "Width", $this->width),
            new NumericField("height", "Height", $this->height)
        );
    }

we construct the api call to retrieve the proportions and the url to the thumbnail:

function retrieveProportions() {
        $vimeo_url = "http://vimeo.com/api/clip/{$this->video_id}.php";
        $rsp = file_get_contents($vimeo_url);
        $clips = unserialize($rsp);
        foreach($clips as $clip) {
            if($clip['clip_id'] == $this->video_id) {
                $this->width = $clip['width'];
                $this->height = $clip['height'];
                $this->thumbnail = $clip['thumbnail_large'];
            }
        }
    }

the html output:

function Content() {
        if($this->video_id) {
            $Content = "<div id=\"Vimeo-{$this->ID}\">";
            if($thumb = $this->thumbnail) {
                $Content .= "<a href=\"http://vimeo.com/{$this->video_id}\" target=\"_blank\"><img src=\"$thumb\" width=\"{$this->width}\" height=\"{$this->height}\" alt=\"\"/></a>";
            } else {
                $Content .= "Watch this video at Vimeo: <a href=\"http://vimeo.com/{$this->video_id}\" target=\"_blank\">http://vimeo.com/{$this->video_id}</a>";
            }
            $Content .= "</div>";
            $this->Content = $Content;
            return $this->Content;
        }
}

the forTemplate function (which is called to display the element)

creating the swfobject call to replace the alternate content we provide

function forTemplate() {
        Requirements::javascript("http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js");
        Requirements::customScript(<<<JS

swfobject.embedSWF(
    "http://www.vimeo.com/moogaloop.swf",
    "Vimeo-{$this->ID}",
    "{$this->width}",
    "{$this->height}",
    "9",
    "",
    {
        "wmode": "opaque",
        "allowfullscreen": "true",
        "server": "www.vimeo.com",
        "clip_id": "{$this->video_id}",
        "show_portrait": "0",
        "show_title": "1",
        "show_byline": "0",
        "fullscreen": "1",
        "color": "FFFFFF" 
    }
);

JS
);
        return $this->Content();
}

now we want to hook in the write process to check if the retrieveautosettings checkbox has been checked...

function write() {
        if($this->autoSettings && $this->video_id) {
            $this->retrieveProportions();
        }
        return parent::write();
}

Thats it!

this should be easy to adapt for other video services, such as youtube & co