Displaying YouTube or Vimeo Thumbnails in Movable Type

| 2 Comments | No TrackBacks |
On a recent project I had a Movable Type blog with entries containing embedded videos hosted on YouTube and Vimeo, and I needed a way to get a thumbnail image for each video so they could be displayed somewhere else on the site.  Here is my solution...
This bit of template code can be included in an <mt:entries> loop or in the body of any entry.

<mt:var name="thumbnailurl" value="">
<mt:var name="thumbfound" value="">

<mt:if tag="entrybody" like="http\:\/\/www\.youtube\.com\/embed\/">
<mt:entrybody regex_replace="/.*http\:\/\/www\.youtube\.com\/embed\/(.+?).\s.*/s","$1" setvar="youtubeid">
<mt:setvarblock name="thumbnailurl">http://img.youtube.com/vi/<mt:var name="youtubeid">/0.jpg</mt:setvarblock>
</mt:if>

<mt:if tag="entrybody" like="http\:\/\/vimeo\.com">
<script>
function showThumb(data){
    document.getElementById('thumb-<mt:entryid>').src data[0].thumbnail_medium;
}
</script>
<mt:entrybody regex_replace="/.*http\:\/\/vimeo\.com\/(\d+).*/s","$1" setvar="vimeoid">
<script type="text/javascript" src="http://vimeo.com/api/v2/video/<mt:var name="vimeoid">.json?callback=showThumb">
</script>
</mt:if>

<mt:if name="thumbfound">
<img src="<mt:var name="thumbnailurl">" id="thumb-<mt:entryid>">
</mt:if>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

The first lines simply reset some variables, nothing special there.

The next block uses some regular expression magic to get the ID of an embedded YouTube video (if the post contains one) and attaches it to a fixed URL at YouTube which then magically becomes a link to the correct thumbnail.  Quite easy actually.

For Vimeo, things are a bit more complex: thumbnails have no fixed URL structure, so you have to use Vimeo's API to get it.  Fortunately they provide a handy javascript version of their API.  In order to use it we first define a little function called 'ShowThumb' that will receive some 'data', and one of the bits of data it will receive is the URL of the thumbnail.  We use that to change the 'src' attribute of an element on the page with the id 'thumb-xyz', where xyz is the ID of the entry.  Next we call the Vimeo API, which calls the showThumb function we just defined and provides it with the correct data.

In the end, if we found a video embed, we show an image with the correct 'src' set (if it is a YouTube video) or with the right id so the showThumb function can set it (for Vimeo).

And that is all there is to it, really :-)


No TrackBacks

TrackBack URL: http://www.movabletips.com/cgi-bin/mt/mt-tb.cgi/2360

2 Comments

How on earth did you know that this was something I was about to look at for my own site?

Indeed I didn't even think it would be possible so wasn't going to try! Will be giving this a go as soon as I get chance!

What's Going down i'm new to this, I stumbled upon this I've found It absolutely helpful and it has helped me out loads. I am hoping to contribute & aid other customers like its aided me. Good job.

Leave a comment


Movable Type Help?

"Can my Movable Type issue or project be taken care of by a professional?" Yes It Can Be! Contact YesItCan.be

Tags

Powered by Movable Type 5.2.7