How do I make a Lightbox embed responsive?

Note: With Vidyard's new embed code (4.0), player dimensions are automatically responsive. See our article on embed code v4 to learn more!

Overview

In order to display a web page appropriately on mobile and smaller screens, web pages are more commonly being responsively designed.

Our standard lightbox embed code will generate a thumbnail image of fixed dimensions, but with additional CSS code, this can be changed to display a larger image and then shrink accordingly.

Solution

This solution requires you to use a responsive div to house the lightbox, add css (style) to include the 'max-width' of the image, and remove the default width property from the lightbox embed code.

<style>
.responsive {
width: 100%;
max-width: 700px;
}
</style>

<div class="responsive">
<script type="text/javascript" id="vidyard_embed_code_UUID" src="//play.vidyard.com/UUID.js?v=3.1.1&type=lightbox"></script>
<div class="outer_vidyard_wrapper">
<div class="vidyard_wrapper" onclick="fn_vidyard_UUID();"><img src="//play.vidyard.com/UUID.jpg?" alt="The name of the player">
<div class="vidyard_play_button"><a href="javascript:void(0);"></a>
</div></div></div></div>

Once you have pasted this code, you will need to adjust the max-width of the image in the style section and replace any mentions of UUID with your Player UUID.

You can see this code in action on:

http://vyexample.com/cbroughton/lightboxresponsive.html