jQuery oEmbed Content

At times, it may be appropriate to embed video content directly in your website.  The oEmbed API enables you to dispaly embeded content such as Vimeo videos, Flickr photos, and YouTube movies.  OEmbed is a format for allowing embedded comtent from third-party sites.  Facebook is a poplar user of the oEmbed format where you can copy and past a link and the link is converted into an embedded movie.  To use oEmbed, you have to first download the jQuery oEmbed plugin . Then you enter the following files in script tags in the head section of your HTML.

src="jquery.min.js" type="text/javascript"
src="jquery.oembed.js" type="text/javascript"

Next, you add a div and and input tag to hold the embedded content in the link:

input id="olink" type="text"
div id="oembed"

Now add some functionality with Javascript. This should be placed in javascript tags right after the body tag in your HTML:

$(document).ready(function() {
$("#olink").blur(function (){
olink = $("#olink").val();
$("#oembed").oembed(olink);
})
});

Next copy and paste a link into the text box and when you move your cursor away from the box, the link will convert to embedded content into your web page. A nice technique to have in your web design toolkit. Visit this link jQuery documentation for the full documentation of the oEmbed plugin.