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).
Post Comments (Atom)
Click on a single comment to hide/show its text
30 comments:
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. :)
@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. :)
Very good indeed !
i have add this feature ;))
nice snippet master :)
@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. :)
@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.
How would one display all videos posted to a particular size, say 300 pixels wide?
@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++);
@MS-potilas
Perfect!
Thanks for making these improvements available to us lesser mortals.
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
@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).
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.
@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.
You are the man! Thank you very much, will spark one for you.
I ran across your post in a search for exactly this.
It worked.
Thanks
Is there any way I can make the video smaller? Like it would show up on YouTube.
@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.
I think this trick help me much to entertain my visitor. Thank you.
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
@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.
@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?
@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.
@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
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?
@Susan Beck
Hi. Check if the code is installed in the template before </head>.
Sorry for the late answer, I was on holiday :)
@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
@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. :)
Thanks. This is very helpful. Still works like a charm in 2018.
This blog is very much helpful to us. Thanks for your information
atstartups
Article submission sites
Good post.Thanks for digital marketing.
See the hack to make the 'Post a Comment' link bigger.
Post a Comment