How to integrate the Viously Video Player

Overview

This guide will help you seamlessly integrate the Viously video player into your website or application. The player is designed to be responsive by default, but we also provide options for non-responsive integration.

Responsive Integration

To integrate the Viously video player in a responsive way, follow these steps:

1. Copy the following code and paste it where you want the video player to appear:

   HTML

   <div class="vsly-player" id="YOUR_VIDEO_ID" data-template="YOUR_TEMPLATE_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>
   

   Replace YOUR_VIDEO_ID with the unique video ID, and YOUR_TEMPLATE_ID with the template ID from the Viously back office.

2. Ensure that the Viously script is included in the head of your HTML document:

   HTML

   <script async id="xieg6Sie" src="https://cdn.viously.com/js/sdk/boot.js"></script>
   

3. The Viously player will automatically replace the div with a default responsive design when the page loads.

Non-Responsive Integration

If you prefer a non-responsive integration, follow these additional steps:

1. Wrap the Viously player div with a container div and set a fixed width for the container:

   HTML

   <div style="width: 640px;">
       <div class="vsly-player" id="YOUR_VIDEO_ID" data-template="YOUR_TEMPLATE_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>
   </div>
   

   Adjust the width attribute of the outer container according to your desired dimensions. Please not that you will break the responsive design on your webpages.

2. Follow the same steps 2 and 3 from the Responsive Integration section.

Responsive Design with Max Width and Centered Player

If you want a responsive integration with a maximum width and a centered player, use the following code:

<div style="max-width: 640px; margin: 0 auto;">
    <div class="vsly-player" id="YOUR_VIDEO_ID" data-template="YOUR_TEMPLATE_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>
</div>

Adjust the max-width attribute of the outer container according to your desired maximum width.

Conclusion

Congratulations! You have successfully integrated the Viously video player into your website or application. If you encounter any issues or have further questions, please refer to our documentation or contact our support team.

Happy streaming!