Scribblings and Geekery

Yesterday I was looking for good instructions on inserting video content into a LiveJournal comment (for someone else) and couldn't find any. So, after being successful, I felt it my geek duty to write up my directions in case, some day someone else needs them. It's a calling, I guess?

LiveJournal's post editor very easily supports inserting media content into posts. There's a semi-friendly GUI which lets you insert an <embed> block from any major video hosting site (e.g. youtube, photobucket, vimeo, etc.) quickly and easily. The comment editor, however, is just a textarea, so if you want any formatting you're left to write the HTML yourself. This is no big deal for some, but even most HTML novices only know the basic five html 4.01 tags (a, img, b, i, u), which are fine for 99% of such situations.

As an aside, I would love to rid the world of the non-xhtml-compliant formatting tags, but perhaps that's just me.

Posting video is a tad more work, though youtube, for instance, makes it painfully easy. They provide a handy dialog to the right of any video with all of the necessary <object> code. You can even customize the background, size, inclusion of related videos, etc. I have to hand it to the folks at youtubegoogle for understanding that their videos should be able to be seen from anywhere, not just their main site.

Well, anyway, youtube wasn't my problem. Photobucket was. They provide you with an <embed> link only, and while that's fine for the LJ post editor, it's incomplete. Here's a few quick steps to add the code necessary to adapt what Photobucket gives you to what is needed for a video to show up in a LiveJournal comment.

Photobucket

1

<embed width="448" height="361" type="application/x-shockwave-flash" wmode="transparent" src="http://i32.photobucket.com/player.swf?file=http://vid12.photobucket.com/albums/abc/UserName/Video/fileName.flv">

Youtube

1
2
3
4
5
6

<object width="480" height="295">
    <param name="movie" value="http://www.youtube.com/v/9hIQjrMHTv4&amp;hl=en&amp;fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9hIQjrMHTv4&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
</object>

Using the Youtube code as a reference, you only have to make a couple of changes:

1. Replace the <embed src=""> code with what Photobucket provides:

1
2
3
4
5
6

<object width="480" height="295">
    <param name="movie" value="http://www.youtube.com/v/9hIQjrMHTv4&amp;hl=en&amp;fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://i32.photobucket.com/player.swf?file=http://vid12.photobucket.com/albums/abc/UserName/Video/fileName.flv" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
</object>

2. Your photobucket video dimensions may be different, so you'll need to fix the height and width in both locations: the <object> tag and the <embed> tag.

1
2
3
4
5
6

<object width="448" height="361">
    <param name="movie" value="http://www.youtube.com/v/9hIQjrMHTv4&amp;hl=en&amp;fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://i32.photobucket.com/player.swf?file=http://vid12.photobucket.com/albums/abc/UserName/Video/fileName.flv" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="448" height="361"></embed>
</object>

...and that's it. It's not at all difficult, but if you're someone (else) that doesn't need or want to know the difference between an <object> tag and an <embed> tag and why you need both to properly display inline video, a couple of simple steps to make your online life easier can make all the difference.