Deploy using the INDIVIDEO Lightbox feature

The Auto lightbox feature is designed to enable users to easily open an INDIVIDEO into an overlay over the page, commonly referred to as a LightBox. Using this feature, and INDIVIDEO can be deployed to any page, and the LightBox can programmatically be opened at any time.

All required scripts and styles are included to make using this feature as easy as possible. Using the INDIVIDEO LightBox is much faster and easier then implement your own LightBox.

How does it work?

The INDIVIDEO LightBox can be integrated on any page by adding two properties to the embed script tag.

Mandatory -> data-bp-mode=”modal”: Will wrap the player in a hidden modal controlled via the IndiVideo API. The modal is an overlay box with a blurry background and an exit button.

Optional -> data-bp-auto-open-time=”5”: Will inform of after how much time (in second) that you want your modal to open and play the video. You can set this value to “0” if you want your modal opening on page load, or simply omit if you do not want it to open automatically, but instead trigger on user input.

As soon as IndiVideo and the smart modal are loaded into the page, the class “smartEmbedModal” becomes accessible on the window object, within JavaScript.

API

window.smartEmbedModal.open()

  • 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.

EX :

document.getElementById(‘individeoCTABtn’).onclick = function(){

window.smartEmbedModal.open();

}

window.smartEmbedModal.delayOpen(10)

  • Imitate the “open” command but do it after a certain amount of time.
  • Pass it a time (in second) as its first parameter.
  • Mimic the data-bp-auto-open-time attribute for the embed script tag.

EX:

document.getElementById(‘individeoCTABtn’).onclick = function(){

// let a little 5-sec animation play out before opening the video modal.

window.smartEmbedModal.delayOpen(5);

}

window.smartEmbedModal.close()

  • Close the modal associated with the player.
  • Does not destroy the video, but simply pause it.

EX:

window.BEM.bind(window.BluePlayer.ONPLAYCOMPLETE,function(e,p){

// The modal will automatically close on the video completion event.

window.smartEmbedModal.close();

});

window.smartEmbedModal.openAndReplay()

  • Open the modal associated with the player in each time (in seconds) passed as the first argument of the function.
  • Auto-play the video from the beginning.

EX:

document.getElementById(‘see_the_video_again_btn’).onclick = function(){

// Watch the video again from start

window.smartEmbedModal.openAndReplay();

}

smartEmbedModal.opened()

  • Return Boolean depending on if the modal has already been open at least one time.
  • Can be used if you need the modal on the first time a user interacts with something.

EX:

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();

}

Last Update: February 16, 2021  

February 16, 2021  6. Releases
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

test //