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: