This tutorial will walk you through embedding a video into a blog post using Embedly jQuery. You’ll need some familiarity with JavaScript and jQuery.
Make sure you have an API key before you begin. Just sign up for a free account.
Say, for example, you have a blog post with a link to a YouTube video:
<div class="content">
<article>
<h2>Title</h2>
<p>Lorizzle ma nizzle dolor sit amizzle, brizzle adipiscing elit. </p>
<a href="http://www.youtube.com/watch?v=ZbcgyPtYBY0">youtube</a>
<p>Maecenizzle owned bow wow wow. Nam eros.</p>
</article>
<article>
...
</article>
</div>
You want your blog’s readers to be able to watch that video without leaving your site. Of course, you could just paste in some embed code from YouTube, but using Embedly instead will give you more flexibility and control.
We need to load jQuery (1.3.1+) and the Embedly jQuery plugin. The latest Embedly jQuery can be found at http://scripts.embed.ly/jquery.embedly.min.js. You can add these dependencies anywhere in your page, as long as you add them in the right order. We’ll just put them in the <head>:
<head>
<title>Page Title</title>
...
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.embed.ly/jquery.embedly-3.0.5.min.js"></script>
</head>
Once the Embedly jQuery plugin is loaded, all you have to do is call
$(selector).embedly({key: your_api_key});
The selector should be a string like "div.content" that limits the scope of Embedly jQuery to the content of your page, preventing embeds from being added to your site’s navigation elements. Embedly jQuery will search for all <a> tags inside of the selected element(s) and replace those links with embeds.
Here’s a complete implementation:
<head>
<title>Page Title</title>
...
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.embed.ly/jquery.embedly-3.0.5.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('div.content').embedly({key: your_api_key});
});
</script>
</head>
We wrap the call to Embedly within $('document').ready() to ensure that the page is fully loaded before the div.content selector runs.
This is all well and good for basic usage, but you may find that you want to customize your embeds a little bit more. This is fairly easy to do with some optional parameters you can pass into the Embedly jQuery script. Let’s take a look at a few of them:
$('div.content').embedly({
query: { maxwidth: 450, wmode: 'transparent' },
method: 'after',
key: your_api_key
});
By default, Embedly will replace the link with the embed. By changing the method parameter to after we’re telling Embedly to insert the embed after the link. This way the URL is still visible and the embed shows up as well. Additionally, I set the wmode to “transparent.” This is important for flash video in case you have any fancy JavaScript popups. I also set the maxwidth to 450 pixels. This will shrink any larger embeds to fit within our column but leave any smaller ones at their original size. This is particularly important for photo embeds. Try popping a flickr url in your page. Those photos are huge, and generally look strange unless you tweak them in to a manageable size.
If you want to see the final result of this tutorial, copy the code from https://gist.github.com/5131044 into an HTML file and open it up in your browser.