Easy embed

Although the following code (a video embed code to be used by visitors of a video site) is discussed in the light of a MediaMosa related site, the implementation can easily be generalized to other video solutions.
It has been a pleasure to work with the MediaMosa framework, a tried and tested Dutch open source software solution enabling you to easily build a full featured, webservice oriented media management and distribution platform. Sort of Drupal based YouTube in a box, including both client and server solutions.

The client site we developed is based on the MediaMosa CK module, which adds support for MediaMosa videos to the Embedded Media Field module.

Almost everything we needed worked out of the box. There was just one major video related feature in our spec that we had to cater for ourselves: the embedding of our video's in other sites. Because the MediaMosa server provides temporary tickets for the within-site embed code, any embed solution has to retrieve a new ticket (URI) from the remote site.

Taking a cue from YouTube we decided the most efficient way to do this might be to simply provide the video in an iFrame.

To do this, we needed to implement two features:

- a special URL, showing only the video
- the iFrame link, easily to be copied and pasted by a user

As usual there are several ways to implement this kind of functionality in Drupal. We could, for example, have created a simple module. Yet in this case we decided to make use of modules already installed.

Basic Video URL

For the first step, the special URL, we used the ThemeKey module. ThemeKey allows you to define theme-switching rules allowing automatic selection of a theme depending on, among others, query parameters. That way we can conditionally select an empty, clean theme only showing the video just by adding a specific query-parameter to the default URL.

In order to get this to work, first download and enable the ThemeKey (themekey, themekey_ui) module, and on D6, ThemeKey Properties (already incorporated in ThemeKey for D7). Next, create a blank theme, containing almost no CSS or markup (like this one, for example) and enable this blank theme as well.

Now go to admin/settings/themekey and add the following:

Adding "?embedded" to any URL will from now on serve the page using our blank theme.

To really only show the video, we do still have to remove all the other fields that are part of the mediamosa_videocontent content type. To do this, we can add a custom node-mediamosa_videocontent.tpl.php (don't forget to copy a default node.tpl.php to the theme dir as well to enable theming content types this way) to our blank theme directory, which only shows the relevant video-field:

print $node->field_mediamosa_videofile[0]["view"];

Don't forget to clear the cache after making changes in your tpl files, go to a video page, add "?embedded" and there you are: a clean, embeddable video.

The Embed Code

Step two is even more easy than step one: all we have to do is make an iFrame available, containing the embeddable link to the video we just created. Let's test this by hand-typing an iFrame in my blog (different from the MediaMosa site) first:

<iframe width="425" height="375" src="http://site.com/content/video_page?embedded" frameborder="0" allowfullscreen></iframe>

If width and height are correct, the video should appear perfectly:

Now all there is left to do is to automate the generation of the embed links, making it available for the visitors of the site. Since this field is just a variation upon the URL, it can be easily "computed" from values already available within this node. Clearly something that can be solved using the Computed Field module.

As usual, first download and enable the computed_field module. Now add a Computed CCK field to the Video node, and use the following for the "Computed Code" section:

$node_field[0]['value'] = '<textarea class="share-embed-code"> <iframe width="425" height="375" src="' .url("node/".$node->nid, array('query' => 'embedded','absolute' => TRUE)) . '" frameborder="0" allowfullscreen></iframe></textarea>' ;

After saving a video-node containing this computed field, a textarea with the embed code will appear, enabling any visitor to embed the video on any other site:

blank.zip7.94 KB


Chris Bloomfield's picture

Thank you so much for posting

Thank you so much for posting this - I've been trying to figure out how to do this for absolutely ages and it would probably have taken me days of frustration before I worked all of this out myself. I'm using Flowplayer / SWF Tools as my video framework but your tutorial translated across to these fine.

The only small problem I ended up having was with Panels - I have a video node template set up in Panels which seems to override node-tpl.php, so every time I tried creating a node template nothing changed. Once I realised this was the problem though I could go into the selection rules for my node template panel and add a 'theme=main theme' selection rule to stop it taking effect on the blank theme.