As in the previous tip on attaching files to your articles, this tip covers adding content to your article – in this case a video or videos.

The methodology is slightly different as the most common usage is to embed a video in an article body or excerpt – perhaps from a service such as Vimeo or YouTube. Some plugins that may be of interest:

1. the_video (my favourite for YouTube/Vimeo, despite it being an orphan plugin)
2. cfm_videoplayer (for FLV, MP4, MP3, AAC files)
3. wlk_qt (for QuickTime videos)
4. arc_youtube (for YouTube videos)

There are other plugins but many of them are orphaned or overlap in function with the plugins listed above.

Using the_video and YouTube

Although its quite easy simply to copy and paste the code output by YouTube/Vimeo et al directly, this results in lots of gunk in your article and you may not want that – I don’t. Personally I prefer to use a plugin and just pass along the #id of the video.

For the following example, we will use the_video plugin and nice video from YouTube (its a great tennis shot from Roger Federer so its worth posting!)

The code placed in this article is:

<txp:the_video from="y" id="1ib97f7KONQ" w="425" h="344" /> 

Much cleaner than:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/1ib97f7KONQ&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1ib97f7KONQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

The other plugins mentioned may offer an alternative depending on your needs, particularly if you need high quality presentation videos.

Video galleries

On the Spain Tennis Academy video gallery I used the following code in the page template:

<txp:article limit="1">
<h2><txp:title /></h2>
<txp:excerpt />
</txp:article>

<txp:article limit="1">
<div class="posted">
<p class="small"><txp:posted /></p>
</div>
<txp:body />
</txp:article>

<h2>Video list</h2>
<txp:article limit="40">
<div class="width12 left margin20">
<a href="<txp:permlink />" title="<txp:title />" class="tooltip"><txp:article_image /></a>
</div>
</txp:article>

The first two code blocks do the following: On the left display the latest video, on the right, display the video details. The video code, similar to our example above, is placed in the article excerpt, while the video description is placed in the article body.

The final code block displays the last 40 videos. One thing to notice – we are using the article_image field to store the static image of the video in our article, like so: http://img.youtube.com/vi/1ib97f7KONQ/default.jpg. You can copy the URL, just be sure to replace the #id which is this: 1ib97f7KONQ