Not all screen sizes are created equal, meaning that the embed type that works well on your desktop may not look as good on your tablet. By using a little bit of Javascript, you can change up which embed code you want to use at which device window sizes. The following code is set up to embed using the lightbox if the window size is above 800px wide but to use the inline embed if the window size is below 800px wide.
Note: Don't forget to swap out all instances of [UUID] with a valid UUID.
<html>
<head>
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
//grab window size
var win_size = $(window).width();
console.log(win_size);
//if window size is below 800px, load inline player
// Replace [UUID] with the UUID of the player you are attemping to embed.
// To find the UUID of a player, see https://knowledge.vidyard.com/hc/en-us/articles/360009868634-Find-the-UUID-for-your-player
if (win_size < 800){
$(document).ready(function(){
$("#[UUID]").append("<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='inline' />");
});}
// Replace [UUID] with the UUID of the player you are attemping to embed.
// To find the UUID of a player, see https://knowledge.vidyard.com/hc/en-us/articles/360009868634-Find-the-UUID-for-your-player
else {
$(document).ready(function(){
$("#[UUID]").append("<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' />");
});}
</script>
</head>
<body>
<div id="[UUID]">
<!-- Vidyard Javascript embed will be placed here -->
</div>
</body>
</html>