How do I automatically launch a Vidyard Lightbox player when I load a page?

Overview

A Vidyard Lightbox player is designed to showcase your video so that the full focus is on the content. The usual implementation would require the page visitor to click on a thumbnail to launch the lightbox.

You may, however, want to have the Lightbox launch automatically when your webpage loads.

Solution

The first two code options below assume that you have only one Lightbox embedded on the page where the code is being added. The third option supports up to 10 lightbox players and will play if a query string selecting the relevant lightbox is present. These can be placed within the head or body of the HTML.

Option 1 - Only launch if a URL query string is present

The code below will trigger the Lightbox automatically if it detects a URL that contains the query string ?autoplay=1.

Using this code means that:

• Adding the query string ?autoplay=1 to the URL will load the page and automatically launch the Vidyard Lightbox.
• Landing on the webpage without this specific query string will display the page as normal. The visitor can then click on the thumbnail to watch the video if they wish.

<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<script type ="text/javascript" >

// Parsing the query string
function get_parameter_by_name(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null) {
return "";
} else {
return results[1];
}
} 
</script>
 
<script type ="text/javascript">

//Determine the value of the autoplay parameter and launch the player if 1

var urlParam = get_parameter_by_name("autoplay");
window.onload = setTimeout(function() {
if (urlParam[0] == "1") {
  
// If the autoplay value =1 then trigger an automated click on the lightbox div after a second

$(".vidyard-lightbox-centering").trigger("click");
}
}, 1000);
</script>

Option 2 - Always launch the Lightbox

If you always want the lightbox to show when you go to the webpage (regardless of whether a query string has been added to the URL), then use the following code instead:

<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<script type ="text/javascript">
window.onload = setTimeout(function() {
$(".vidyard-lightbox-centering").trigger("click");
}, 1000);
</script>

Option 3 - Multiple Lightboxes

If you have a number of lightbox embeds and want to specify which one plays automatically, then you can use this code. Use the query string ?playvideo= followed by a number.

For example. if you want the second lightbox on the page to load automatically, add ?playvideo=2 to the end of the page URL before loading it.

The value used in the query string is based on the order the lightbox embeds are within the HTML (and therefore likely on the page).

<!--jQuery if it's not on the page already!-->
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>

<script type ="text/javascript" >

// Parsing the query string
function get_parameter_by_name(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null) {
return "";
} else {
return results[1];
}
} 
</script>
 
<script type ="text/javascript">

//Determine the value of the video parameter and launch the relevant player

var urlParam = get_parameter_by_name("playvideo");
var elements = document.getElementsByClassName('vidyard-lightbox-centering');

window.vidyardEmbed
 ? initApp(window.vidyardEmbed)
 : (window.onVidyardAPI = (vyApi) => initApp(vyApi));

function initApp(vyApi){
 console.log('Api is ready ', vyApi);
 var players = VidyardV4.players;
 console.log(players);

if (urlParam[0] == "1") {
 
// If the playvideo value =1 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[0];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "2") {
 
// If the playvideo value =2 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[1];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "3") {
 
// If the playvideo value =3 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[2];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "4") {
 
// If the playvideo value =4 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[3];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "5") {
 
// If the playvideo value =5 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[4];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "6") {
 
// If the playvideo value =6 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[5];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "7") {
 
// If the playvideo value =7 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[6];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "8") {
 
// If the playvideo value =8 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[7];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "9") {
 
// If the playvideo value =9 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[8];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "10") {
 
// If the playvideo value =10 then trigger an automated click on the releavnt lightbox div after a second
var requiredElement = elements[9];
$(requiredElement).trigger("click");
}
};
</script>