Overview
By default, the lightbox embed code allows you to add a clickable thumbnail image to a webpage that launches the video in a 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.
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>