Why does my lightbox keep left aligning?

Overview

A Vidyard lightbox embed will generate a thumbnail image when placed on a page. It's likely that you will want to place this image into a div (which may have an uncontrollable width) and display it centrally. 

Symptom

When you are designing a web page, e.g. from a Marketo Guided Landing Page template and are placing the lightbox code within the div, it renders to the left side and causes the page to look different from how you expected.

Cause

There is a 'float:left' CSS property within the Lightbox Javascript which needs to remain in order to display the Play Button in the correct place and at the right size. 

Solution

You can add the following CSS, either on the page or as a global value to change the positioning properties of the lightbox so that it will always render in the centre of a div.

<style>
.outer_vidyard_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>