Spotlightr API opens up below defined set of methods and events you can use to:

  • Send commands and data to the video player from your web page.

  • Listen to events in the player from the web page and react.

To learn more about the available functions methods and callbacks please refer to the API documentation.

<div className="padding-30">
<form id="voo-video-upload" method="post" encType="multipart/form-data">
<input id="voo-video-upload-input" type="file" name="files[]" multiple/>
<input type="submit" value="Upload Video" name="submit"/>
window.addEventListener('DOMContentLoaded', () => {
const url = '';
const form = document.getElementById('voo-video-upload');
form.addEventListener('submit', (e) => {
const files = document.getElementById('voo-video-upload-input').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('files[]', file);
formData.append('vooKey', 'INSERT YOUR API KEY HERE');
formData.append('name', 'Upload from API');
formData.append('customS3', '0');
formData.append('create', 1);
formData.append('file', files[0]);
fetch(url, {
method: 'POST',
body: formData,
}).then((response) => {
  • Another example - when the video reaches a certain time, I want a section of the page to appear beneath it with an offer.

<script src=""></script><iframe allow="autoplay" class="video-player-container spotlightr" data-playerid="MTA5ODEyMw==" allowtransparency="true" style="max-width:100%" name="videoPlayerframe" allowfullscreen="true" src="" watch-type="" url-params="" frameborder="0" scrolling="no"> </iframe>

<div id="hidden" style="display: none; background:yellow; font-size:3em"> this is hidden until second 3</div>

document.addEventListener('vooPlayerReady', vooPlayerReady, false);
function vooPlayerReady(event){
vooAPI("MTA5ODEyMw==", 'getTime', ['3'], getTime);
function getTime(time){
document.querySelector("#hidden").style.display = "block";


Did this answer your question?