How can I display your video in a LightBox?

Designed to enable users to easily open an IndiVideo in an overlay over your page content, this feature is commonly known as a LightBox.

With this feature, one or more IndiVideo can be added to any page. The LightBox can programmatically be opened at any time. The feature comes with its own scripts and styles, making it self-contained and neutral in design. Perfect to include in any circumstance, it's much simpler and faster than creating your own LightBox feature.

Including the LightBox in a page

The IndiVideo LightBox can be integrated on any page by adding one attribute to the Smart-Embed script tag.

Mode: modal

The attribute data-iv-mode instructs the Smart-Embed to wrap the player in a hidden modal controlled via the IndiVideo Javascript API.

<script 

  data-iv-mode="modal"

  src="https://d2ur3inljr7jwd.cloudfront.net/individeo/prod/edge/js/smartEmbed.js" 
  data-iv-attachment-code="xfyKKk9RWf4TCV7k7Q-2596" 
  data-iv-lang="en-CA"
></script>

Delay open (optional)

This optional attribute must be given a number value. This number is the amount of time in seconds the modal will wait after page load to open and play the video.

data-iv-auto-open-time="5"

When it's set to 0, the modal will open on page load. Omit this attribute when the modal is opened manually.

Manually open the modal (Javascript API)

As soon as the Smart-Embed and Smart Modal are loaded on the page, the Javascript object smartEmbedModal becomes available on the window object.

window.smartEmbedModal.open([attachment-code], [autoplay])

• Open the modal associated with the player.
• The video will be on pause.
• The video will be at the same progression that it was when you last closed this modal.

attachment-code (string): (optional) Defaults to the last IndiVideo embeded in the page. Useful only when adding multiple IndiVideo lightboxes to one page, this parameter instructs the Smart-Modal on which IndiVideo to play.

autoplay (boolean): (optional) Defaults to false. Instructs the player to autoplay the video after opening the LightBox.

Example 1: open latest IndiVideo embeded on the page, don't autoplay the video

document.getElementById('individeoCTABtn').onclick = function(){
  window.smartEmbedModal.open();
}

Example 2: open latest IndiVideo embeded on the page, autoplay the video

document.getElementById('individeoCTABtn').onclick = function(){
  window.smartEmbedModal.open(true);
}

Example 3: open a specific IndiVideo embeded on the page, autoplay the video

document.getElementById('individeoCTABtn').onclick = function(){
  window.smartEmbedModal.open('abc-123',true);
}

window.smartEmbedModal.delayOpen(seconds,[attachment-code])

• Similar to the "open" command, but does it after the specified amount of seconds.
• Similar to the data-iv-auto-open-time attribute for the embed script tag.
• Cannot autoplay the video.
• See window.smartEmbedModal.open() for attachment-code parameters definition.

Example: LightBox opens after a 5 seconds animation is over

document.getElementById('individeoCTABtn').onclick = function(){
  window.smartEmbedModal.delayOpen(5);
}

window.smartEmbedModal.close()

Pause the video, and closes the modal associated with the player.

Example: Close modal when video reaches its end

window.BEM.bind(window.BluePlayer.ONPLAYCOMPLETE,function(e,p){
  window.smartEmbedModal.close();
});

window.smartEmbedModal.openAndReplay([attachment-code], [autoplay])

• Opens the modal and autoplay the video from the beginning.
• See window.smartEmbedModal.open() for parameters definition. Difference: autoplay is true by default.

Example: Open, start the video from the beginning and autoplay

document.getElementById('see_the_video_again_btn').onclick = function(){
  window.smartEmbedModal.openAndReplay();
}

smartEmbedModal.opened()

• Returns true if the modal was opened at least once.
  Useful when different messaging needs to appear on second viewing of the video.

Example:

document.getElementById('some_btn').onclick = function(){
  if(!smartEmbedModal.opened()) {
    // The modal has never been open, let us watch the video!
    window.smartEmbedModal.open();
  }else{
    // It has already been open, time to see something else
    showMessage('See more video of Individeo!');
  }
  window.smartEmbedModal.openAndReplay();
}