Skip to main content
All CollectionsPublishing Videos
Change Size of Video in a Large Container
Change Size of Video in a Large Container

If you can't adjust the size of the container/element that the video embed code is placed you can add a parameter to adjust the size

Updated over a week ago

Our embed code is fully responsive and is meant to fill the entire element or container that the code is added to. So if the container you are using fills the entire screen and you want the video to be smaller, but can't change the size of the container, try this change to the code you are adding.

Here is how our regular embed code looks and how it fills up a container. Imagine tha the area inside the blue border is the container in your page builder or membership site platform.

<div style="position:relative; width:1px; min-width:100%;padding-bottom:56.25%;"><iframe allow="autoplay" class='spotlightr' allowtransparency="true" style="width:1px; min-width:100%; height: 100%; position:absolute" allowfullscreen="true" src="https://billzimm.cdn.spotlightr.com/watch/MTMyNTQ5Nw==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer"> </iframe></div>

And here is the change by adding an additional <div> tag and modifying size on the container level with padding:

<div style="padding: 0 16.5%">
<div style="position:relative; width:1px; min-width:100%;padding-bottom:56.25%;"><iframe allow="autoplay" class='spotlightr' allowtransparency="true" style="width:1px; min-width:100%; height: 100%; position:absolute" allowfullscreen="true" src="https://billzimm.cdn.spotlightr.com/watch/MTMyNTQ5Nw==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer"> </iframe></div>
</div>

To make it bigger or smaller, simply change the number in the code. For example here is the size by changing 16.5% to 10.5%:

<div style="padding: 0 10.5%">
<div style="position:relative; width:1px; min-width:100%;padding-bottom:56.25%;"><iframe allow="autoplay" class='spotlightr' allowtransparency="true" style="width:1px; min-width:100%; height: 100%; position:absolute" allowfullscreen="true" src="https://billzimm.cdn.spotlightr.com/watch/MTMyNTQ5Nw==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer"> </iframe></div>
</div>

Did this answer your question?