Pages

Sunday, March 4, 2012

28

Allow users embed YouTube videos in Blogger comments

Some time ago while googling something about video embeds I came across with oEmbed specification. This simple API allows websites to display embedded content from oEmbed providers. After some inspecting I used the oEmbed in a Python script to turn youtube links in a text into embedded videos. Worked nicely.

oEmbed returns data in JSON or XML format. That is ok with server side languages like php and Python. But for javascript this is a problem. If there is a problem, usually solution is found, and I found Embedly service, which is unfortunately not free.

With no intention to invest any money, and hands itching for another Google Appengine Python app, I saw an opportunity. To make a service that relays YouTube's oEmbed results to javascript format (JSONP). And all with memory caching etc. so it should be able to handle some traffic. After some coding it was ready and working http://oembed-js.appspot.com/?url=[youtube url to embed][&callback=foo] But now where to use it...

In Wordpress blogs, when commenting an article, user can just write/paste youtube url into the comment text, and it will be turned into a video embed. Surprise, not in Blogger. For some blogs this is a bummer. Now with my new, free, javascript/jQuery compatible GAE service oembed-js this became possible in Blogger. Of course we need to hack the blog first a bit. :)


You can decide, whether you want to turn all raw youtube links (watch and playlist links) into embeds, which is the default, or only those, that use [video=youtube_url] tag. You can also change the tag name, if you want, maybe you like youtube or embed more. If you have lazy loading installed in your blog, by default this script will use it, and pages with many videos load much faster. Installation is simple, open template html for editing, find </head> and paste this code before it:


This script does not work in dynamic views, but it works with Blogger native comments, my threaded comments, and also Blogger threaded comments. Hope you like it. I'll tell you later about the oembed‑js service API (application programming interface), so it is easier for you to develop own applications.

References:
- oEmbed specification
- YouTube API blog: oEmbed support

Update 27th March 2012: Line #74 updated, to handle better the case of only a YouTube url as comment text in new Blogger threaded comments (you do not need to update if you use videotag, or don't use Blogger threaded comments).
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

28 comments:

OCP said... [reply]

Last week I was looking for a script that could do this and found a little one called nccode that I adapted to include youtube videos, it works but your solution looks more elegant and user friendly. :D

Nccode basically it's sort of BBCcode, adapted to work on Blogger. You can see it working on my blog here, let know what you think. :)

MS-potilas said... [reply]

@OCP That looks nice, I've been thinking of something like that myself also. One could combine the two (maybe disable youtube embed code in nccode).

One thing I've been thinking of is autolinking those urls that are written as plain text, that would be easier for commenters and readers. Well, maybe someone has already done it, I haven't googled.

Thank you for your comment. :)

Beben Koben said... [reply]

i have add this feature ;))
nice snippet master :)

OCP said... [reply]

@MS-potilas I decided to go with your sugestion and install your script and the video-lazyload as well. :)
But the lazyload only could make it work on the comments, might be some other script confliting. :(
Not a problem, since I rarely post videos and usually when I do it, I use shadowbox.

I edited my post with some links to your blog. ;)

btw, on my blog I have a top commenters widget that works with yahoo pipes but lately I've been thinking that might be a way to do the same only with json and javascript and maybe show the avatars as well.

What you think? That could be possible?

Take care. :)

MS-potilas said... [reply]

@OCP Hi, yes, lazy load works automatically only on oembedded youtube urls in comments. If you want lazy loading in article text, you need to use the specified markup (anchor with class "youtube-lazy-link"), which is turned into a "lazy embed". Shadowbox and such are great way, they also don't slow down the page load, and look great.

Yes, I think top commenters could be "calculated" from the comment feed, and everything could be done in javascript. I think the last 500 comments would be sufficient. It would be something like this: Load the comments (summary) feed in jsonp, process every entry, incrementing a counter for each commenter name/website. Also store the avatar (image link). Sort the table to get top commenters. Display for example top 10 commenters, with avatars and maybe each with a link to latest comment.

robbie said... [reply]

How would one display all videos posted to a particular size, say 300 pixels wide?

MS-potilas said... [reply]

@robbie
Hi, that's easy to accomplish, line 83 is now:

oembed_yt(url, $(this).width(), callID++);

change it to:

oembed_yt(url, 300, callID++);

robbie said... [reply]

@MS-potilas

Perfect!

Thanks for making these improvements available to us lesser mortals.

Mr Admin said... [reply]

HI ADMIN
AFTER INSTALLING THIS SCRIPT,IT WORKS GOOD BUT YOUTUBE IFRAME IT ISN'T IN MY CM_ENTRY TAKE LOOK http://www.smartastuces.co.cc/2012/04/simplifier-ladresse-de-sa-page-facebook.html
PLEASE HELP ME

MS-potilas said... [reply]

@Mr Admin Hi, comment text contains only the link, and this script changes youtube links to iframe embeds after page load. iframes cannot be stored in comment texts (not allowed tag).

Pape said... [reply]

Hi MS-potilas,

I recently started a blog which will heavily depend on this hack that you created. I pasted the codes just before "/head" and tried posting a comment on my first blog posting. I got the an error message "Your HTML cannot be accepted: Tag is not allowed: IFRAME". I'm sure I've done something wrong. Your help would be much appreciated.

MS-potilas said... [reply]

@Pape Hi, don't use the youtube embed code (because iframe tag is not allowed) in comment text, but just the youtube video url. The script will change the url into a embedded video.

Pape said... [reply]

You are the man! Thank you very much, will spark one for you.

kenny said... [reply]

I ran across your post in a search for exactly this.

It worked.

Thanks

Tomas Raudys said... [reply]

Is there any way I can make the video smaller? Like it would show up on YouTube.

MS-potilas said... [reply]

@Tomas Raudys
Hi, you can set the width whatever you want. Line 83 is now:

oembed_yt(url, $(this).width(), callID++);

If you want 240 pixels wide video embeds in comments, change it to:

oembed_yt(url, 240, callID++);

You can use any value you want.

mazdipo said... [reply]

I think this trick help me much to entertain my visitor. Thank you.

Susan Beck said... [reply]

Hi, this block is older, I hope one will still read, its really good working with videos, thank you so much, but what is with images in comments? How can one do this?

Thank you for giving an answer

MS-potilas said... [reply]

@Susan Beck
Hi,
I may not implement the image embedding in oembed-js. I thought about it but then there were so much open questions, which image hosts to accept, how to make thumbnail images, etc. And at this point, I don't really need it myself.

I suggest you look at nccode, which OCP mentioned in the first comment, here: nccode.

Susan Beck said... [reply]

@MS-potilas

thanks for your quick answer :-) yes we tried with [img]...[/img] but that doesnt work... for example:

[img]http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Luis_emilio_recabarren.jpg/250px-Luis_emilio_recabarren.jpg[/img]

is there any mistakes, we did?

MS-potilas said... [reply]

@Susan Beck
With nccode the tag is not [img] but [im] (or [im#]). And you must have the script installed, see "How to install?" section in the nccode page. I have not tried it myself, so I may not be able to help more.

Susan Beck said... [reply]

@MS-potilas

thank you so much, yes I installed this code and tried it, like you said, but it didnt work...

oky then, I am searching again, good luck, your posts are great!

Susan Beck said... [reply]

@Susan Beck

Hi I am here again, it worked so well with the videos in the commemts and now from one day to another, something happened? i can see only the url-address, videos are gone...:-(

does anybody know, why?

MS-potilas said... [reply]

@Susan Beck
Hi. Check if the code is installed in the template before </head>.

Sorry for the late answer, I was on holiday :)

Susan Beck said... [reply]

@MS-potilas

no probleme, I hope you had fine holidays :-) I looked at the templates, its deleted...

We didnt delete it, so only google-team could have done it? (We wrote in Turkey, is your code forbidden there? Could that be?

( I got your html code from a friend, because in Turkey, when we opened this page from you, the code is invisible, not to see...)

hm, can I install it again, or will I get problemes then, what do you think...

kindly regards

MS-potilas said... [reply]

@Susan Beck I think that has gotten accidentally deleted. There's nothing forbidden, you can use it, just install it again as you already thought. :)

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: