Here we used a bigger play button with border and transparency. Also added rounded corners.
Try this video out on your site with this embed code:
<div style=”position: relative; width: 1px; min-width: 100%; padding-bottom: 56.25%;”><iframe class=”spotlightr” style=”width: 1px; min-width: 100%; height: 100%; position: absolute;” src=”https://spotlightrteam.cdn.spotlightr.com/watch/MTE5NzkxMA==?fallback=true” name=”videoPlayerframe” frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”> </iframe></div>
To accomplish this with your video, you just need to edit the embed code manually. Here is what you are adding:
border-radius: 20px; overflow: hidden;
You add it right towards the beginning of the embed code after padding-bottom: 56.25%;
So for example, this is the embed code you copy from the app:
<div style=”position: relative; width: 1px; min-width: 100%; padding-bottom: 56.25%;”><iframe class=”spotlightr” style=”width: 1px; min-width: 100%; height: 100%; position: absolute;” src=”https://spotlightrteam.cdn.spotlightr.com/watch/MTE5NzkxMA==?fallback=true” name=”videoPlayerframe” frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”> </iframe></div>
And this is what you use after you edit it:
<div style=”position: relative; width: 1px; min-width: 100%; padding-bottom: 56.25%; border-radius: 20px; overflow: hidden;”><iframe class=”spotlightr” style=”width: 1px; min-width: 100%; height: 100%; position: absolute;” src=”https://spotlightrteam.cdn.spotlightr.com/watch/MTE5NzkxMA==?fallback=true” name=”videoPlayerframe” frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”> </iframe></div>
You can experiment with different numbers instead of 20px to have different rounded edges.