Documentation
Go to viously.com

How to integrate the Viously Video Player

Suggest Edits

Overview

The Viously video player is built for seamless integration. Whether you require a fully responsive layout or a fixed-dimension player, our integration options make it easy to adapt to your design requirements. Use the export codes provided below to quickly set up the player in the aspect ratio that best suits your content.

How to Add the Viously Player to Your Site

1. Basic Integration (Responsive by Default)

To integrate the Viously video player in a responsive way:

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

    Portrait (9:16)

    <div class="vsly-player" id="YOUR_VIDEO_ID" style="background:#ddd;font-size:0;position:relative;overflow:hidden;width:min(100%,calc(70vh * 9/16));max-height:70vh;aspect-ratio:9/16;margin:0 auto;"></div>

    Square (1:1)

    <div class="vsly-player" id="YOUR_VIDEO_ID" style="background:#ddd;font-size:0;position:relative;overflow:hidden;width:min(100%,50vh);max-height:50vh;aspect-ratio:1/1;margin:0 auto;"></div>

    Landscape (16:9)

    <div class="vsly-player" id="YOUR_VIDEO_ID" style="background:#ddd;font-size:0;position:relative;overflow:hidden;width:100%;padding-top:56.25%;"></div>
    • Replace YOUR_VIDEO_ID with your actual video ID.
    • Replace YOUR_TEMPLATE_ID with the template ID from your Viously dashboard.
    • If a skin is enabled in your template, please use an Alternative Export Codes for Skinned Player

  2. Add the Viously script to your page:

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

  3. The Viously player will automatically replace the div when the page loads.

2. Fixed-Size (Non-Responsive) Integration

If you prefer a fixed-width player, follow these steps:

  1. Wrap the Viously player in a container with a fixed width:

    <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 value as needed. Be aware that this disables responsive resizing.

  2. Include the Viously script as shown in step 2 of the basic integration.

3. Centered Player with Max Width

If you want a responsive integration with a maximum width and a centered player, use this setu

<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 value as needed.

4. Alternative Export Codes for Skinned Player

For players with an enabled skin (e.g., with UI elements like buttons), use the following:

Portrait (9:16) with Skin

<div class="vsly-player" id="YOUR_VIDEO_ID" data-template="YOUR_TEMPLATE_ID" style="background:#ddd;font-size:0;position:relative;overflow:hidden;width:min(100%,calc(70vh * 9/16));max-height:calc(70vh + 24px);height:calc(70vh + 24px);aspect-ratio:9/16;margin:0 auto;"></div>

Square (1:1) with Skin

<div class="vsly-player" id="YOUR_VIDEO_ID" data-template="YOUR_TEMPLATE_ID" style="background:#ddd; font-size:0;position:relative;overflow:hidden;width:min(100%,50vh);max-height:calc(50vh + 24px);height:calc(70vh + 24px);aspect-ratio:1/1;margin:0 auto;"></div>

Landscape (16:9) with Skin

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

Need Help?

If you have any issues or need assistance, contact us at [email protected].

Updated 1 day ago