Overlay Positioning Guide

Sometimes it can be difficult to position the elements on your video exactly how you want them to appear. This is why we have put together this set of recommendations to achieve some of the most sought after layouts. 

In the near future we plan to put together a set of templates that will allow you to load these presets from the overlay settings. But for now, just let us know if we can explain an additional layout that you want to accomplish by sending us a screenshot of it at support@vooplayer.com

Corner Buttons

One of the layouts we get asked about most often is how to set an image or text link to one of the corners of the videos. It requires a slightly more technical approach than just point and click, but it is rather simple. Here is what you need to do when creating a new overlay from the Audiece Events, Interaction menu:

Setting up styles
  • Style Template: Annotation
  • Position: Top
  • Background: Fully Transparent
  • Hide Border: Turned On

Overlay Content

Setting up styles was easy, now let's go to the fun part. On the Overlay Details Tab, first you will need to delete the headline and insert the following code in the source view of the content input:

<!-- Top Right Text Button-->
<a href="" style="position:absolute; top:10px; right:10px; background:yellow; color:black; padding: 10px">Top Right Text Button</a>

<!-- Top Left Image Button-->
<a href="" style="position:absolute; top:10px; left:10px; width:200px">
  <img src="https://www.tipsandtricks-hq.com/ecommerce/wp-content/uploads/2009/10/orange-add-to-cart-button-with-credit-cards.png" alt="">
</a><br>

Finally click on Save Overlay at the bottom and that's it.
Customization

If you are not satisfied with the results you can always fine tune the code to adjust to your specific needs. It's easy, take a look at the following places in the code:

  • top parameter sets the margin from the top of the video
  • left parameter sets the margin from the left border of the video
  • img src is the link to the image

Additionally, you can always look up button generators and create your own code. What matters the most is that the Overlay Style configurations are as stated above and that the button has an absolute position which you can manipulate.