Video Thumbnails in Your Blog

Today you have the opportunity to participate in my first ever ONLINE POLL! Check out the various ways of showing video on a WordPress blog and vote for your favorite. (To put this in context, you might want to read my post from a couple of days ago, Working out my blog format)

YouTube in Division Floated Left without a border

Centered Caption

The most challenging formatting comes with floating a video thumbnail to the left and allowing text to wrap down the right side.  The embed code one gets from the video host (YouTube for the example on the left) does not allow for such formatting.  If there is a slicker way to handle this, please let me know in the comments.

What I did was create a division within html that I could float left.  This also gives the option of including a frame, but in my standard layout I don’t do this.  Early versions of Internet Explorer reportedly did not handle the margins (spacing outside the division) or padding (spacing inside the division) properly.  IE7 appears to have rectified this.

An example of this code is shown here:

<div  style=”text-align: center; margin: 3px; padding: 3px; float: left; width: 230px;”><object width=”226″ height=”170″ data=”http://www.youtube.com/v/Mv7Hl54u-CA” type=”application/x-shockwave-flash”><param name=”align” value=”left” /><param name=”src” value=”http://www.youtube.com/v/Mv7Hl54u-CA” /></object>Centered Caption</div>

Embed Life Adventures Player in Division Floated Left without a border

Centered Caption

Another video host is blip.tv, which allows one to modify the appearance of their player slightly.  For example, I added the name of my travel blog Life Adventures in the branding field at the bottom of the video. I’m using the exact same division tags as in the previous code but pasting the blip.tv embed code between the tags. I think this looks less visually cluttered on such a small thumbnail than YouTube which superimposes their logo in the bottom right hand area.

Embed Vimeo in Division Floated Left without a border

Centered Caption

Vimeo also offers hosting service. While it doesn’t impact the blog reader’s interface, Vimeo is constantly asking their user’s to upgrade. It is a minor annoyance, but not something YouTube or blip.tv do.

On the other hand, look how cool the player is.  Nothing but thumbnail, baby.  For the blog reader, this is the cleanest interface I’ve found.

The “also rans”

There are a multitude of ways to show flash video in WordPress. Some require javascript. Others require a plug-in. One is limited only by the lengths to which one is willing to go in order to master this media. Here are some further examples. I might use these in special cases, but it is doubtful. That is why they are not included in the polling. I just include them here for the sake of completeness.

Script to Dreamhost’s JW Player javascript

Get the Flash Player to see this player.

One can also use one’s host’s player. (Be aware of any licensing issues. For more information, contact your host provider.) My host has licensed the use of the JW Player. The advantage here is that one has full control of the display. Another advantage is that one can keep all the video files stored at one’s own site. The disadvantage is that it requires a minimal comfort level with same basic java scripting. I’m not sure it is worth it, when one has the option to just cut and paste embed code from video host providers. (If you use Dreamhost’s video format converting utility they generate the java. If not, remember to add 20 to the video height to get the overall player height if you show a toolbar.)

Dreamhost’s JW Player using the WP-FLV Plug-in

Centered Caption

This plug-in is conveniently provided by my host provider. My main gripe with the plug-in is that it does not allow for a poster image so the video “thumbnail” is a black rectangle. I’m not sure why Dreamhost doesn’t just default to the Embed FLV plug-in.


JW Player set up by the Embed FLV Plug-in

[flv:http://blip.tv/file/get/Tom4Surfing-BarbadosCatamaranLaunch610.flv http://blog.trlong.com/wp-content/gallery/geek-tutorials/barbados-catamaran226_170.jpg 226 170]Centered Caption

Fully customizable player. But all flash players using this plug-in must have the same style in every instance of every post. For example, if the toolbar is set up to auto-hide in this post, it will auto-hide in every post.

I hope this will save someone some time in figuring out how to display flash in WordPress.

And, now, the polls are open.

Loading…

This entry was posted in Geeky and tagged , , , , , , , . Bookmark the permalink.