Wednesday, January 13, 2010

Embedding in Blogger with Jump Breaks (Update 2)

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.


Entertonement Embed
<embed width="320" height="35" type="application/x-shockwave-flash"
   src="http://media.entertonement.com/embed/OpenEntPlayer.swf"
   flashvars="auto_play=false&e=&skin_pid=wfxswdnlkf&image_size=flash&clip_pid=rlqmbtyyxl"
   allowscriptaccess="always"
   wmode="transparent"></embed>

Entertonement JavaScript (Update 2: Entertonement deprecated this call)
<script type="text/javascript"
   src="http://www.entertonement.com/clips/bbcode?clip_url=http://www.entertonement.com/clips/dnyznbfblm">
</script>

Entertonement Object
<object width="300" height="30" type="application/x-shockwave-flash"
   data="http://media.entertonement.com/embed/OpenEntPlayer.swf" >
   <param name="flashvars" value="auto_play=false&e=&skin_pid=wfxswdnlkf&clip_pid=ydlwpvjgfl"></param>
   <param name="allowscriptaccess" value="always"></param>
   <param name="wmode" value="transparent"></param>
   <embed width="320" height="35" type="application/x-shockwave-flash"
      src="http://media.entertonement.com/embed/OpenEntPlayer.swf"
      flashvars="auto_play=false&e=&skin_pid=wfxswdnlkf&image_size=flash&clip_pid=ydlwpvjgfl"
      allowscriptaccess="always"
      wmode="transparent"></embed>
</object>
   
YouTube Embed
<object width="320" height="265">
   <param name="movie" value="http://www.youtube.com/v/7Y33BI8L-_8"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed width="320" height="265" type="application/x-shockwave-flash"
      src="http://www.youtube.com/v/7Y33BI8L-_8"></embed>
</object>

YouTube Object
<object width="320" height="265" type="application/x-shockwave-flash"
   data="http://www.youtube.com/v/QVZhdHIW-Ko">
   <param name="movie" value="http://www.youtube.com/v/QVZhdHIW-Ko"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed width="320" height="265" type="application/x-shockwave-flash"
      src="http://www.youtube.com/v/QVZhdHIW-Ko"></embed></object>

10 comments:

  1. Nice work around with moving the embed parameters into the object tag! Works like a charm now. Cheers!

    - Aaron
    http://blog.aaronbrownphotos.com

    ReplyDelete
  2. Good to hear that it worked for you - it feels good to be useful for a change :)

    ReplyDelete
  3. Amazing. Thanks very much!

    ReplyDelete
  4. 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?

    ReplyDelete
  5. Do you have a screenshot or could you post a sample of your code? I tested this in Chrome, Opera, Safari and FF on OS-X and the embeds on this post shows up fine for me.

    I'll fire up my Windoze VM and see if I get different results.

    ReplyDelete
  6. OK, I noticed some oddities in IE8 and the first Entertonement player doesn't show up properly in any browser, though I didn't notice a FF-specific issue so I'd still like more details.

    Looks like I have a bit of work to do. I'm a bit slammed at work but I should get around to a followup this weekend. I'll create a new post and link to it from this one.

    ReplyDelete
  7. Hi again, I used the code you provided about embed youtube. Anyway I droped it. But in Chrome it works without doing any changes. I guess this is a blogger bug...

    ReplyDelete
  8. 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.

    ReplyDelete
  9. A very easy solution, and worked like a charm. Thanks a lot!

    ReplyDelete