First XSLT Function

Vimeo

So we have made a function for YouTube. Let’s make one for Vimeo, another online video service, as well.

Visit vimeo.com and examine at the site and find out the way to embed their videos.

Their URL’s to a video is something like this: http://www.vimeo.com/3826770

So they use a large integer for uniquely identifying a video.

They provide an embed tag code generator as well:

<object width="400" height="301"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3826770&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3826770&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="301"></embed></object><br /><a href="http://vimeo.com/3826770"> Rihanna - Disturbia (Live@VMA 2008)</a> from <a href="http://vimeo.com/user1477864">Rihanna More</a> on <a href="http://vimeo.com">Vimeo</a>

Listing 7: Vimeo’s embed video code

Ehm, doesn’t this look familiar?

I guess I can leave the rest to you!

I would surely add the width and height parameters in here, in YouTube they are mostly the same but with Vimeo they differ a lot. Unfortunately I have not yet found out how to request the correct values from Vimeo. Users can use the preview and the Vimeo embed code to pull the correct sizes. Tell them to do so with your function description and help text on your function.

And they allow for a little more customizing, you can specify colors etc to better match your website!

I came up with this XSLT part in the <body> section:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
...
<!-- Vincent van Gentevoort nov 2008
optional attributes
 show_title,  show_byline  show_portrait  fullscreen  color  00adef  blue
  http://vimeo.com/moogaloop.swf?clip_id={$moviecode}&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=&amp;fullscreen=0
-->
<xsl:param name="moviecode" select="/in:inputs/in:param[@name='moviecode']" />
<xsl:param name="height" select="/in:inputs/in:param[@name='height']" />
<xsl:param name="width" select="/in:inputs/in:param[@name='width']" />
<xsl:param name="allowfullscreen" select="/in:inputs/in:param[@name='allowfullscreen']" />
   <xsl:template match="/">
      <html>
         <head />
         <body>
 <object width="{$width}" height="{$height}">
 <param name="allowfullscreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="movie" 
 value="http://vimeo.com/moogaloop.swf?clip_id={$moviecode}" />
 <embed 
 src="http://vimeo.com/moogaloop.swf?clip_id={$moviecode}" 
 type="application/x-shockwave-flash" 
 allowfullscreen="false" 
 allowscriptaccess="always" 
width="{$width}" height="{$height}">
 </embed></object>
...
      </body>
   </html>
</xsl:template>
</xsl:stylesheet>

Listing 8: Using the embed code in the function

This results in something like this:

Figure 20: Part of the rendered page with the Vimeo function