Spotlightr embed code has an iframe element which includes a style property so all you need to do is add some code to that style property.
For example, this is what a standard embed code looks like:
<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; border: 4px orange solid; box-shadow: 0px 0px 20px black" allowfullscreen="true" src="https://videos.cdn.spotlightr.com/watch/MTgxNTIxNg==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer" > </iframe></div>
The style property is this portion:
style="width:1px; min-width:100%; height:100%; position:absolute;"
Now let's add an orange border with box shadow. We just need to add this piece of code to the style property:
border: 4px orange solid; box-shadow: 0px 0px 20px black
So now the embed code looks like this:
<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; border: 4px orange solid; box-shadow: 0px 0px 20px black" allowfullscreen="true" src="https://videos.cdn.spotlightr.com/watch/MTgxNTIxNg==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer" > </iframe></div>
And the output looks like this:
Let's drop the border and add the shadow only. Code looks like this:
<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; box-shadow: 0px 0px 20px black" allowfullscreen="true" src="https://videos.cdn.spotlightr.com/watch/MTgxNTIxNg==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer" > </iframe></div>
Here's the output:
Now let's just use a border only but let's make it a bit bigger and make it purple. Code will look like this:
<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; border: 7px purple solid;" allowfullscreen="true" src="https://videos.cdn.spotlightr.com/watch/MTgxNTIxNg==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer" > </iframe></div>
Here's how that looks:
Now let's add another box shadow but change the position off-set (first two numbers), blur radius and color. Here is the original code we used. The 0 0 signify the position from the center with 20px blur radius:
box-shadow: 0px 0px 20px black
Changed to this:
box-shadow: 6px 6px 5px gray
Full embed code:
<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; box-shadow: 6px 6px 5px gray" allowfullscreen="true" src="https://videos.cdn.spotlightr.com/watch/MTc5NzIwMw==?fallback=true" frameborder="0" scrolling="no" name="videoPlayer" > </iframe></div>
Outputs this:
