In this tutorial I want to illustrate how to use oEmbed API to display embedded content (such as Flickr photos, YouTube or Vimeo videos) in your website.

What’s oEmbed? oEmbed is a format for allowing an embedded representation of a URL on third party sites (YouTube, Flickr, Vimeo, Viddler, …).

Where is oEmbed used?

Facebook probably has one of the most popular implementation of oEmbed. For example, when you copy a link from YouTube into your status bar, Facebook converts this link into an embedded movie.

How you can implement this feature? It’s really simple using jQuery oEmbed an easy to use jQuery plugin that helps you convert links into embedded content. Take a look at the live example below.

Live Example

Source Code

First of all you have to download the jQuery oEmbed Plugin. Then you have to include on the tag of the page a link to jQuery and jQuery.oEmbed:

In your HTML page, you have to add an input field and div layer (into which your links will be embedded):

Now add this simple JavaScript function immediately after the body tag:

In this tutorial I used the blur() event but you can customize the code as you prefer (for example when an user submits the form). For the full reference guide to jQuery Events I suggest you to take a look at the jQuery official documentation.

Using Animation

If you want to implement the animation I used in this tutorial (the input field disappears with a fade-out effect after submitting a link) you have to change the HTML code in this way (wrap the input field with <div id="oembedcont">...</div>):

and the JavaScript function in this way (add $("#oembedcont").fadeOut(1000);):

You can download the source code of this tutorial and reuse it on your web projects.

Here is a collection of ten useful jQuery plugins of 2009 you can’t miss. If you have other interesting plugins to share, please leave a comment. Thanks!

jQuery Before/After

This plug-in shows the difference between two images simply dragging a slider over the two images which are sandwiched with one on top of the other. The final effect is really nice and easy to implement.

Take a look at this plug-in here. For the demos here.

Sunday Morning

Sunday Morning is a jQuery plugin which allows site-owner to offer their visitors some easy and fancy ways to translate their content in more then 30 languages.

jQTouch

jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices. Absolutely to have if you are a mobile developer.

CJ Image Video Previewer

CJ Image Video Previewer is meant to mimic the video preview boxes you see on many Video sites. It displays a block that contains an image thumbnail and when the user moves their cursor of the box, it dynamically loads and then displays a group of images in sequence. Kind of like a flip-book. This is an excellent way to provide an preview of the video, without the user actually downloading the video file.

Autosave

Autosave is a flexible autosave plugin for jQuery. If yo want to autosave a form use this simple code:
$("form#myForm").autosave();.

MapBox

The jQuery MapBox plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from being able to zoom in and pan to get a better view.

Ajax Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries.

Infinite Scroll

Infinite Scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page. This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience (with this plug-in you can implement easily a DZone.com-like navigation experience).

jQuery Tools

jQuery Tools isn’t a plug-in but is a collection of the most important user-interface components for today’s websites (tabs, tooltips, overlay, drag-and-drop, exposé, scrollable, …).

jQuery lightBox

jQuery lightBox is probably one of the most popular an easy to implement jQuery light-box. This plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery’s selector.

Choosing the right hosting company is a crucial aspect for the success of your web site. When I switched from Blogger to WordPress I spent a lot of time looking for a company that offered high-quality services at an affordable price. After some days of researches I decided to host Woork Up on MediaTemple.
Now, after three months, I can say I’m really satisfied about their service and in particular about the customer support that helps you solve quickly every issue.
And you, which hosting service do you suggest to use and why? Please leave a comment, thanks!