Overview
A Vidyard Lightbox player is designed to showcase your video so that the full focus is on the content.
Normally, the page visitor would click on a thumbnail to launch the Lightbox. With the code selections below, you can launch the Lightbox automatically when your webpage loads. This ensures that your most important video is immediately presented to your viewer.
Solution
We’ve created several code snippets that can be placed within either the head or body of your page’s HTML. Choose the option most relevant to your setup, and your chosen Lightbox will load as soon as a viewer navigates to your page.
The first two code selections below assume that you have only one Lightbox embedded on the page where the code is being added. The third option supports multiple Lightboxes (up to 10); you can select which you’d like to play by adding the appropriate query string to the URL.
Note: The code snippets below for Options 1 & 2 will include the Lightbox embed code, you do not need to add it separately.
Option 1 - Only launch the Lightbox 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. If you need more information on how query strings function, check out our article on how to use query parameters.
Using the code below achieves the following:
- Ensures that adding the query string
?autoplay=1to the URL will automatically launch the Lightbox as soon as the page is loaded. - Makes landing on the webpage without this specific query string display the page as normal. The visitor can then click on the thumbnail to watch the video if they wish.
In the code below, please ensure that you replace "UUID" with the UUID for your Vidyard video. If you need help locating this, read our article on how to find your UUID.
<!-- The script tag should live in the head of your page if at all possible -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- Put in <head> of page -->
<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>
<!-- Put in <body> of page -->
<div id="player-container"></div>
<script type="text/javascript">
var urlParam = get_parameter_by_name("autoplay");
window['onVidyardAPI'] = function (vyApi) {
vidyardEmbed.api.renderPlayer({
uuid: 'UUID',
container: document.getElementById('player-container'),
type: 'lightbox',
}).then((video) => {
if (urlParam[0] == "1") {
video.showLightbox();
}
});
};
</script> </script> .
Option 2 - Always launch the Lightbox on page load
If you always want the Lightbox to show when a viewer loads your webpage (regardless of whether a query string has been added to the URL), you can use the following code.
Please ensure that you replace "UUID" with the UUID for your Vidyard video. If you need help locating this, read our article on how to find your UUID.
<!-- The script tag should live in the head of your page if at all possible -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- Put in <body> of page -->
<div id="player-container"></div>
<script type="text/javascript">
window['onVidyardAPI'] = function (vyApi) {
vidyardEmbed.api.renderPlayer({
uuid: 'UUID',
container: document.getElementById('player-container'),
width: 640,
type: 'lightbox',
}).then((video) => {
video.showLightbox();
});
};
</script>
Option 3 - Multiple Lightboxes
If you have a number of Lightbox embeds on your page, and want to specify which one plays automatically, you can use this code. Use the query string ?playvideo= followed by the number of your preferred video.
The value used in the query string is based on the order of the Lightbox embeds within the HTML, and therefore likely on the page.
For example, if you want the second Lightbox on the page to appear automatically, add ?playvideo=2 to the end of the URL before loading the page.
Please note that the code provided here does not include any Vidyard embeds, so you will need to include the Lightbox embed codes for the videos you want to include in the <body> of your page.
The following shows an example for a 3-video setup, but can accommodate up to a maximum of 10. Simply add more of the if URL parameters in the same style as seen below.
<!-- The script tag should live in the head of your page if at all possible -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- Add jQuery to the head of the page if it's not on your page already -->
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<!-- Put in <head> of page -->
<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>
<!-- Put in <head> or <body> of page -->
<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 is 1 then trigger an automated click on the relevant lightbox div
var requiredElement = elements[0];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "2") {
// If the playvideo value is 2 then trigger an automated click on the relevant lightbox div
var requiredElement = elements[1];
$(requiredElement).trigger("click");
}
if (urlParam[0] == "3") {
// If the playvideo value is 3 then trigger an automated click on the relevant lightbox div
var requiredElement = elements[2];
$(requiredElement).trigger("click");
}
};
</script>