Overview
By default, the Responsive Lightbox embed provides a webpage with a clickable video thumbnail that launches the lightbox player. Instead, you may want to use a button or other customized HTML element to launch it.
You may also have a requirement to play a specific chapter when a button is clicked.
Learn more about the difference between the inline and lightbox embed, including how the lightbox embed normally behaves.
Solution
The sample code below will show you how to launch the responsive lightbox embed with a button while also hiding the thumbnail. This initial code is designed for lightboxes with a single chapter, or where you want to just play from the beginning of a playlist. The code following this will provide a way to include chapter selection.
<html>
<head>
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
</head>
<body>
<style>
/*Hide the thumbnail*/
#sample {
display: none;
}
</style>
<div id="sample">
<!--Replace [UUID] with Player UUID -->
<div class="vidyard-player-embed" data-uuid="[UUID]" data-v="4" data-type="lightbox">
</div>
</div>
<script>function launchLightbox(val) {
var players = VidyardV4.api.getPlayersByUUID(val);
var player = players[0];
player.showLightbox();
}
</script>
<!--Replace [UUID] with Player UUID within ' '-->
<button onclick="launchLightbox('[UUID]')"> Click Me</button>
</body>
</html>
When you want a button or set of buttons to go a specific chapter, you can use the following method:
<!--Embed script - place in head of page or only once-->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<style>/*Hide the thumbnail*/
.vidyard-player-embed, .vidyard-player-container {display:none!important;}
</style>
<!--Simple embed with no image. Replace [UUID] with specific Player UUID-->
<div class="vidyard-player-embed" data-uuid="[UUID]" data-v="4" data-type="lightbox"></div>
<!--Name the buttons however you wish, but leave the onclick function-->
<button onclick="playLightboxChapter(0)">first</button>
<button onclick="playLightboxChapter(1)">second</button>
<button onclick="playLightboxChapter(2)">third</button>
<button onclick="playLightboxChapter(3)">fourth</button>
<button onclick="playLightboxChapter(4)">fifth</button>
<button onclick="playLightboxChapter(5)">sixth</button>
<script>
//Replace [UUID] with Player UUID within ' '
function playLightboxChapter(val) {
var player = vidyardEmbed.api.getPlayersByUUID('[UUID]')[0];
player.showLightbox();
player.on('play', function playChapter() {
player.playChapter(val);
player.off('play', playChapter);
})
}
</script>