How can I open a Lightbox with a button instead of an image (and play a specific video)?
Disclaimer: This article is provided for instructional purposes only. Vidyard does not support or guarantee the code. Vidyard also cannot offer support for third-party tools and platforms or technologies such as JavaScript, jQuery or CSS.
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.
<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 -->
<img
class="vidyard-player-embed"
data-uuid="[UUID]"
data-v="4"
data-type="lightbox"
>
</img>
</div>
<script>
function launchLightbox(val) {
var player = VidyardV4.api.getPlayersByUUID(val)[0];
player.showLightbox();
}
window['onVidyardAPI'] = (vyApi) => {
vyApi.api.renderPlayer({
uuid: 'pbe8nHumzjYAtH96eDTbZE',
container: document.getElementById('sample'),
type: 'lightbox',
aspect: 'landscape',
});
}
</script>
<!--Replace [UUID] with Player UUID within ' '-->
<button onclick="launchLightbox('[UUID]')"> Click Me</button>
</body>
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>
<div id="sample">
<!--Replace [UUID] with Player UUID -->
<img
class="vidyard-player-embed"
data-uuid="[UUID]"
data-v="4"
data-type="lightbox"
>
</img>
</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>