Wednesday, January 13, 2010

Blogger has an annoying bug where it strips out embed tags in the shortened version of an article when you add a jump break. Everything works fine when you hit the "read more" link and view the entire post, but what if you want to embed something before the jump break? I found a few solutions.

Entertonement

I was trying to embed a clip from Entertonement. Here's an example of their standard embed tag which won't be visible unless you hit the 'read more' link at the bottom of the article.

While looking for a way to make it work, I found that they have a method of embedding via JavaScript, although it wasn't obvious at first. On their embed page, there is a description on how to embed in BBCode. If you go to the page and click on one of the 'show' links in the 'Custom BBCode Values' section (sorry - no direct way to link to it), you can see the JavaScript used to do it. Here's a clip embedded via Javascript:

Update 2: Entertonement deprecated this call. Code removed.

Still, things weren't showing up exactly the way I wanted. The player wouldn't show up in Google Reader and in certain preview modes while I was editing the posts. That's when I came across this post talking about how the embed tag is rather non-standard and we all should be using the object tag instead, so I took one more shot at it to see what I could do:

Viola!

Update: It turns out the best way to cover all bases is not just to use the object tag, but to also include the embed tag as well.

If you look below the fold, you can see which parameters I converted to make it work. You can experiment for yourself (on your own blog) to see which parameters are really necessary for your purposes.

YouTube

So the next thing was to make it work for YouTube videos. Here's their normal embed that's messing things up:

The nice thing about YouTube is that the embed is already wrapped in an object tag, so conversion is much easier. Here's the result:

Update: The YouTube code also works best with the merged object/embed method as well.

Code samples below.

I formatted and trimmed down these versions of the source code to make things easier to read and understand, but they're fully functional.

Update: samples have been updated to reflect the merged object/embed tags. Added code in italics.

In chrome it works very well but in Firefox For some reason it doesn't show the video. There is an empty space where the video should have been.(the empty space has the dimension of the object).If I right click on the space it says "the video in not loaded".Any workaround?

Thank you, and why aren't you working for Google? I just used your solution to correct problems with both YouTube and Vimeo videos embedded in my blog (lakeviews.ironeconsulting.com). You are a good human being.