Building a Simple Vimeo Wordpress Plugin

The other day I needed to embed a Vimeo clip into my blog. This should have been a straight for­ward process, given the small amount of code that was needed. Well, the more I explored the var­i­ous options for get­ting Vimeo into Word­press, the more I real­ized that there really aren’t any great solu­tions. First, if you copy the code from Vimeo’s site and paste it into your post, the embed will work and video will play. How­ever, if you switch between the rich text editor and the code view, Word­press changes the <embed> tag to an <img> tag and your video is no more—making it impos­si­ble to edit the post later on. Second, the code that comes from Vimeo is not valid XHTML. This is a prob­lem, as I don’t want non-​standard code on my site. Finally, the selec­tion of plu­g­ins that allow embed­ding media in your posts are just too bloated. Most allow you to embed every video format under the sun—making the plu­g­ins large—and have clunky inter­faces and tags.

My solu­tion was to write a simple Word­press plugin that allows tag-​based embed­ding of Vimeo videos [vimeo 1821974] and out­puts valid XHTML to the browser. No other for­mats are sup­ported (although they could easily be added) and there is no admin menu. This also serves as a great intro­duc­tion to build­ing small plu­g­ins for Word­press.

Thanks to Martín Aberastegue and his WP-​Vidz plugin for the inspiration.

  1. Create a new file—locally or on your server—and name it vimeo.php (or what­ever you want, really). Open the empty the file in your favorite text editor.

  2. Add the required header to the file so Word­press knows a little more about the plugin. This is done using stan­dard PHP block com­ments. Don’t forget to add the open­ing <?php tag so Word­press and your server know what to do with the code.

    <?php
    /*
    Plugin Name: Simple Vimeo
    Plugin URI: http://siarto.com/2008/10/02/vimeo-wp-plugin/
    Description: Valid XHTML Vimeo embed tag
    Author: Jeff Siarto
    Version: 0.1
    Author URI: http://siarto.com
    */
  3. This plugin has two parts, the main vimeo_code() func­tion that defines the tag and an add_filter() call that reg­is­ters the new tag with Wordpress.

  4. Create a new func­tion below the header com­ment block called vimeo_code() that takes a single argu­ment named $data. This argument will hold the tag that we use in our posts to embed a Vimeo video—in this case: [vimeo 1821974].

    function vimeo_code($data) {
    
    }
  5. Add two vari­ables within the vimeo_code() func­tion to store the height and width of the video (this is an area that could use an admin GUI, but remem­ber, we’re going for sim­plic­ity here). Set the height and width to values that fit well on your page. Remem­ber to pre­serve the aspect ratio of your clip so that the video doesn’t look squashed or stretched.

    function vimeo_code($data) {
        $video_width = 450;
        $video_height = 340;
    }
  6. Next, we need some code that takes our Vimeo tag and out­puts the proper XHTML to the browser, dis­play­ing the cor­rect video based on the ID. To do this we declare a vari­able named $data (the same name as our function argument) and use PHP’s preg_replace() func­tion to extract the ID. $pattern and $replacement are just place­hold­ers that we’ll change fur­ther along in the tutorial.

    function vimeo_code($data) {
        $video_width = 450;
        $video_height = 340;
        $data = preg_replace($pattern, $replacement, $data);
    }

    The first argument for preg_replace() is a reg­u­lar expres­sion that matches the format of our tag (this will replace the $pattern place­holder). This will look for a pat­tern in a chunk of text and if it finds a match, replace it with our spec­i­fied text.

    function vimeo_code($data) {
        $video_width = 450;
        $video_height = 340;
        $data = preg_replace("~\[vimeo (.*?)\]~i", $replacement, $data);
    }

    The second argument is a string con­tain­ing the code that will be inserted when our plugin finds the spe­cial Vimeo tag in our posts. This is basi­cally an XHTML-​valid ver­sion of the embed code you get from Vimeo. The last argu­ment—$data just tells the func­tion what to per­form the first to actions on. In our case, we want to replace the text that is passed to our vimeo_code() function.

    function vimeo_code($data) {
        $video_width = 450;
        $video_height = 340;
        $data = preg_replace("~\[vimeo (.*?)\]~i", "<object
            width=\"$video_width\"
            height=\"$video_height\"
            data=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\"
            type=\"application/x-shockwave-flash\">
                <param name=\"allowfullscreen\" value=\"true\" />
                <param name=\"allowscriptaccess\" value=\"always\" />
                <param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\" />
            </object>\n", $data
        );
    }
  7. The last line in our vimeo_code() func­tion just returns the value of $data. This sends our object code to the browser for dis­play.

    function vimeo_code($data) {
        $video_width = 450;
        $video_height = 340;
        $data = preg_replace("~\[vimeo (.*?)\]~i", "<object
            width=\"$video_width\"
            height=\"$video_height\"
            data=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\"
            type=\"application/x-shockwave-flash\">
                <param name=\"allowfullscreen\" value=\"true\" />
                <param name=\"allowscriptaccess\" value=\"always\" />
                <param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\" />
            </object>\n", $data
        );
        return $data;
    }
  8. The very last snippet of code needed to make this plugin work is a call to the add_filter() Word­press func­tion. This just tells Word­press that our vimeo_code() func­tion should be exe­cuted when­ever the the_content tem­plate tag is used. Make sure you also close your script with a ?> tag.

    add_filter('the_content', 'vimeo_code');
    ?>
  9. Save this file and place it in your plu­g­ins direc­tory. Once the plugin is acti­vated, you can begin using the spe­cial tag [vimeo 1821974] (replac­ing the ID with the one of your video) in your posts to prop­erly embed Vimeo media on your blog.

    vimeo tag example

Down­load the com­pleted vimeo.php plugin file.

Tags: , ,

8 Comments

  • Martín Aberastegue

    Great job Jeff :), and thanks for men­tion me in your post.

  • Erwin Heiser

    Very nice this, I’m not a Word­press user but I can see this coming in handy. Great you went to the trou­ble of pro­duc­ing valid XHTML as well.
    Cheers!

  • Nick Pettit

    That’s awe­some! Nice work.

    My friend Jim and I found that this is some­thing we had to do all the time, so we also built a tool for it, called Valid­i­fier, that allows you to con­vert Flash embed code into valid XHTML.

    Hope that helps some­one! :D

  • Jeff Siarto

    @Nick
    Thanks for the link, that’s a great tool. I just don’t under­stand why these ser­vices aren’t pub­lish­ing standards-​compliant code in the first place. I under­stand the need for back­ward com­pat­i­bil­ity—but they should at least give users the option to gen­er­ate code that prop­erly val­i­dates.

  • Frank Thomas

    Very good! I enjoyed your post immensely. As works to boot! Thanks very much for shar­ing.

    Frank.

  • nocturnale

    Excel­lent work. I deployed it for use on my blog here at http://​www.​noc​tur​nale.​com/​c​h​r​o​n​i​c​l​e​/​2​0​0​8​/​1​0​/​f​r​o​m​-​b​a​b​y​-​k​a​t​e​-​w​i​t​h​-love/

  • Stuart

    Hi. I have been des­per­ately trying to this to work. WP always seems to strip out the height and width tags from the object code. I have tried every­thing i can think of, dis­abling all other plu­g­ins etc. and also edit­ing the kses.php file to allow object and embed tags. Any ideas what I am doing wrong?

    http://​max​eaton​mar​torell.com/

  • Jeff Siarto

    @Stuart
    As far as WP strip­ping out the height and width tags, are the values prop­erly escaped in vimeo.php? I would double check and make sure the file you are using matches my code above. Also, I’m run­ning WP 2.6, so there might be a chance that this won’t work on an older ver­sion. It has not really been tested on other ver­sions.

Post a Comment





Recommended