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
Copy the following link into the input field above: http://www.youtube.com/watch?v=d6PDlMggROA
When your mouse loses the focus on the input field the YouTube movie will be embedded below. You can also use Vimeo, Viddler, Flickr links.
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:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>In your HTML page, you have to add an input field and div layer (into which your links will be embedded):
<input type="text" id="olink"/>
<div id="oembed"></div>Now add this simple JavaScript function immediately after the body tag:
<script type="text/javascript">
$(document).ready(function() {
$("#olink").blur(function (){
olink = $("#olink").val();
$("#oembed").oembed(olink);
})
});
</script>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>):
<div id="oembedcont"><input type="text" id="olink"/></div>
<div id="oembed"></div>and the JavaScript function in this way (add $("#oembedcont").fadeOut(1000);):
<script type="text/javascript">
$(document).ready(function() {
$("#olink").blur(function (){
olink = $("#olink").val();
$("#oembedcont").fadeOut(1000);
$("#oembed").oembed(olink);
})
});
</script>You can download the source code of this tutorial and reuse it on your web projects.
Nice but as a developer sometimes i love to do stuff by myself and not using plugin… but it’s still coool way :)
i know what you want to say, and in regard of learning processes it is often useful to develop it manually according to a good written tech book.
of course u can get the url and parse the content via php and curl to get the embed content you want without the use of jsonp and a callback function…
but this is another tutorial.
tanti saluti, and go, go ,go!
Very Usefulll! Thanks!!!
Bel tutorial, complimenti.
Is there a way to make it follow HTTP headers? Because then it would work with shortened URLs, which is nice if you’re working with a Twitter-related mashup.
Great Info! Thanks Antonio – Avn
Awesome! Love it!
Just wondering though, is there a way to prevent it from fading out when the link isn’t valid? For instance, if I click in the input, type nothing, and click outside of the input, it fades, and I have to refresh the page to try again.
You know what I’d really like to see- a tutorial on how to make your own video site oEmbed compatible! :)
Excellent tutorial, as usual!
Great tutorial!
You can get the thumb, title and content of the video as on facebook?
Thanks!
great info,
thanks.!!
Useful and time-saving instructions. Thanks…
Hello there! Thanks for the amazing article which is incredible to know we can do these amazing things! But tell me: Is there a way to edit if someone post some unaccepted youtube link (for example) in my project site?
Thanks and I’ll be back here to know your reply ;)
Hey!
Very good job..
This article is very useful for video developers
Thanks
SV
Excelente trabajo, muy buen tutorial, gracias por compartirlo. Muy bueno.
Saludos.
Excellent work , very useful article concerning oembed. And it’s extremely time saving as it has already being said. I was just wondering , once the page is updated with the video or picture ( for instance : a youtube video) , nothing is saved in the .html , how do webpages like facebook do to keep everything saved once a user enters the link and be able to display to them again once they log again. Does this involves saving information in a database ??
If this is right , then once the link is recovered from the stored information in the database , is oembed reapplied in all the information recovered or how are the links (vimeo , flickr , etc..) and only the links , not all the information , transformed to different videos once again , and displayed to a user who logs to facebook for example. Well , it’s really hard to explain but I think I made clear my point .If anybody could help me get out of the doubt I would really appreciate it ,
Thank you very much ,
rodc
i use this tutorial to build the form from my website to share videos of soccer. you can try this entering on http://futborama/ and discharged with their Facebook account. it’s easy. The use I gave was to show a preview before uploading a video.