Inline

Example 1: Replace

It's hard to show inline because it just looks like it was always meant to be. So for the first example we will just show and inline image.

<p>
  On a cold snowy walk in the woods the dog threw on her boots and went for a walk.</p>
<p>
  <a href="http://instagram.com/p/TwWnNSIXRo/">http://instagram.com/p/TwWnNSIXRo/</a>
</p>
<p>
  We found her miles later and captured the beast for the photo.
</p>
<script type="text/javascript">
  $('.example-1 .example-inline a').embedly({
    key:'YOUR_EMBEDLY_KEY',
    query: {
      maxwidth:530,
    }
  });
</script>
          

Example 2: Click to Replace

To slow it down and show you what actually happened, here is the same HTML. Click on the button to see the image be replaced inline.

$('.example-2 button').on('click', function(){
  var $button = $(this);
  $('.example-2 .example-inline a').embedly({
    done: function(){
      $button.hide();
    }
  });
});
          

Example 3: Autoplay Videos

In order to increase page load times, it's generally a good idea to only load a video when a user asks to play it. Instead of directly inserting the iframe or SWF object, we insert the image and when the user clicks on it we replace it with the video that autoplays.

In order to accomplish this we use the data on the a with the thumbnail we get back from the oEmbed response.

<p>
  <a class="play" href="http://www.youtube.com/watch?v=vsmUpYIA99o">Watch</a>
</p>
          

.play {
  position: relative;
  display: block;
}
.play span {
  display: block;
  width: 77px;
  height: 77px;
  background-image: url(../img/play-button.png);
  position: absolute;
}
          

$('.example-3 .example-inline a').embedly({
  query: {
    maxwidth:500,
    autoplay:true
  },
  display: function(data, elem){
    //Adds the image to the a tag and then sets up the sizing.
    $(elem).html('<img src="'+data.thumbnail_url+'"/><span></span>')
      .width(data.thumbnail_width)
      .height(data.thumbnail_height)
      .find('span').css('top', data.thumbnail_height/2-36)
      .css('left', data.thumbnail_width/2 - 36);
  }
}).on('click', function(){
  // Handles the click event and replaces the link with the video.
  var data = $(this).data('embedly');
  $(this).replaceWith(data.html);
  return false;
});