How can I make a Vidyard Lightbox automatically close after the final video ends?

Overview

When you watch a Vidyard lightbox player on any website, the modal 'pop up' window will continue to display after the video has finished. 

Depending on the user experience that you want to deliver, this may not be the best solution. You may want the lightbox window to close following the completion of playback.

Solution

You can use the following code to close the player when the video content has finished playing.

Simply copy this code and replace the five parts with <PLAYERUUID> to match your player's UUID code (remove the surrounding <> as well). The code includes the lightbox embed code, so you can completely remove the previous embed code you may have been using.

Note: The jquery.min.js, api.js and progress-events.js only need to appear once on the page. If you are using this code multiple times, please adjust as necessary.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' id='vidyard_embed_code_<PLAYERUUID>' src='//play.vidyard.com/<PLAYERUUID>.js?v=3.1.1&type=lightbox'></script>
<script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>
<script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script>
<script type='text/javascript'>
var listeners = [];
function resetListeners() {
// Reset any previous listeners to noops:
for (var i = 0; i < listeners.length; i ++) {
listeners[i] = function() {};
}
var index = listeners.length;
listeners.push(function (result) {
console.log(`${result.player.metadata.chapters_attributes[result.chapter].video_attributes.name}: ${result.event}%.`);
});
VidyardProgressEvents(function(r) { listeners[index](r); }, [1,25,50,75,100]);
}
resetListeners();
$(document).on('click', '.vidyard_tmask,.vidyard_tclose', resetListeners);
var video = new Vidyard.player("<PLAYERUUID>");
video.on("playerComplete", function() {
$('.vidyard_tclose').click();
});
</script>

<div class="outer_vidyard_wrapper">
<div class="vidyard_wrapper" onclick="fn_vidyard_<PLAYERUUID>();">
<img width="360" src="//play.vidyard.com/<PLAYERUUID>.jpg?" alt="Video"><div class="vidyard_play_button"><a href="javascript:void(0);"></a></div></div></div>

Here's a quick demonstration of how this looks on a webpage: