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.
If you have a playlist, you may want to automatically play a specific video in the list when the 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 a lightbox with a single video, or where you want to just play from the beginning of a playlist. The code following this will provide a way to select a specific video if there's more than one in a playlist.
<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 video in a playlist, 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="playLightboxVideo(0)">first</button>
<button onclick="playLightboxVideo(1)">second</button>
<button onclick="playLightboxVideo(2)">third</button>
<button onclick="playLightboxVideo(3)">fourth</button>
<button onclick="playLightboxVideo(4)">fifth</button>
<button onclick="playLightboxVideo(5)">sixth</button>
<script>
//Replace [UUID] with Player UUID within ' '
function playLightboxVideo(val) {
var player = vidyardEmbed.api.getPlayersByUUID('[UUID]')[0];
player.showLightbox();
player.on('play', function playVideoAtIndex() {
player.playVideoAtIndex(val);
player.off('play', playVideoAtIndex);
})
}
</script>