Modals

Example 1: On Demand

When a user clicks a link, open the video in a modal and call Embedly. This method reduces the number of call to the Embedly API, but will have a slight increase in loading time.

// set up the defaults.
$.embedly.defaults = {
  key:'YOUR_EMBEDLY_KEY',
  query: {
    maxwidth:530,
  },
  display: $.noop
}

$('.example-1 a').on('click', function(){
  var url = $(this).attr('href');

  // Start the modal and on hide, clear the html out. This removes the embed.
  // It's important to do so as if a user starts playing a video, then closes
  // the modal the video will still be playing and the user will hear the sound.
  $('#video-modal').modal().on('hide', function(){
    $('#video-modal .modal-body').html('');
  })

  // Call embedly and when the url has been resolved fill the modal.
  $.embedly.oembed(url).progress(function(data){
      $('#video-modal .modal-header h3').html(data.title);
      $('#video-modal .modal-body').html(data.html);
    });

  return false;
});
            

Example 1: Pre Load Demand

When the page is loaded, all links are first sent to Embedly and preloaded into the data element of the url. When at user clicks on the link, the data is pulled from the element and immediately displayed. This takes advantage of the move things when no one is looking principle.

// Set up defaults.
$.embedly.defaults = {
  key:'YOUR_EMBEDLY_KEY',
  query: {
    maxwidth:530,
  },
  display: $.noop
}

$('.example-2 a').embedly().on('click', function(){
  // Start the modal and on hide, clear the html out. This removes the embed.
  // It's important to do so as if a user starts playing a video, then closes
  // the modal the video will still be playing and the user will hear the sound.
  $('#video-modal').modal().on('hide', function(){
    $('#video-modal .modal-body').html('');
  })

  // Get the Embedly data.
  var data = $(this).data('embedly');

  // There is a race condition here where the data may not be ready by the
  // time that the user clicks the link. The loaded attribute on the embedly
  // obj lets you make sure everything is there. `done` will fire immediately
  // if the data has already been loaded.
  data.loaded.done(function(){
    $('#video-modal .modal-header h3').html(data.title);
    $('#video-modal .modal-body').html(data.html);
  });

  return false;
});