How do I replace the thumbnail with a text link to open a lightbox embed?

February 23, 2021 17:11
Updated

Overview

A standard lightbox embed will provide a clickable thumbnail image (the image will be based upon the thumbnail chosen for your player).

You may want the ability to replace this image with text of your choosing, or have an additional link formed outside of the embed code.

Solution

The Lightbox code, which you will see on your share page, should look like this:

<!-- 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 this wherever you would like your player to appear -->
<img
 style="width: 100%; margin: auto; display: block;"
 class="vidyard-player-embed"
 src="https://play.vidyard.com/[UUID].jpg"
 data-uuid="[UUID]"
 data-v="4"
 data-type="lightbox"
/>

In order to remove the image and replace it with text, you will need to replace this code with an API version.

The code below will perform a number of changes to the original code.

Calls a Render Players function when a link is clicked.
Makes a paragraph of text imitate a link on hover.
Requires a div 'vyLightbox' to house the images when a click is performed, but these will be hidden.
Avoids images being added into the page on page load.

Note: The SEO Metatags (JSON-LD Video Schema) feature and some API functionality will not work if using this specific code as the player will only render on click. You can use the 2nd code option below if this is a concern.

You will need to edit the UUID within the 'onclick' parameter in the final lines to match the player(s) of your choosing.

You can have as many links on the page as you need using a class of 'lightboxlaunch'.

<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<style>
/*Hide the thumbnail*/
#vyLightbox{display:none;}
.lightboxlaunch {cursor:pointer;}
</style>
<script>
function launchLightbox(d){let e=!0;document.getElementById("vyLightbox").innerHTML=`<img \n class="vidyard-player-embed"\n src="https://play.vidyard.com/${d}.jpg"\n data-uuid="${d}";\n data-v="4"\n data-type="lightbox"\n />`,vidyardEmbed.api.renderDOMPlayers(document.getElementById("vyLightbox")),new Promise(d=>window.vidyardEmbed?d(window.vidyardEmbed):window.onVidyardAPI=(e=>d(e))).then(a=>{VidyardV4.api.getPlayersByUUID(d)[0].showLightbox(),e=!1})}
</script>
<div id="vyLightbox"></div>

<p class="lightboxlaunch" onclick="launchLightbox('UUID')">First Video</p>
<p class="lightboxlaunch" onclick="launchLightbox('UUID')">Second Video</p>

To preserve the API and SEO Metatags functionality, you can use the following. The original Lightbox image will be loaded into the page, but hidden:

<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<style>
/*Hide the thumbnail*/
#sample {
display: none;
}
.lightboxlaunch {cursor:pointer;}
</style>
<div id="sample">
<!--Replace [UUID] with Player UUID -->
<img class="vidyard-player-embed" data-uuid="[UUID]" data-v="4" data-type="lightbox">
</div>
<script>function launchLightbox(val) {
var players = VidyardV4.api.getPlayersByUUID(val);
var player = players[0];
player.showLightbox();
}
</script> 
<!--Replace [UUID] with Player UUID within ' '-->
<p class="lightboxlaunch" onclick="launchLightbox('[UUID]')">Click Me</p>

Overview

Solution

Need support