Setup

Welcome to the Setup section of this documentation. Here, you'll find instructions on setting up VP Vertical Player, managing multiple players on a page, and configuring both basic and advanced options.

VP Vertical Player is highly customizable, allowing you to tailor its appearance and behavior to fit your needs. Before configuring the player, you need to set it up properly. Below are the steps to do so.

Setup Description

The basic syntax for creating the player is:

• vpVerticalPlayer("div").setup(configuration)

The table below explains the parameters:

ATTRIBUTE	DESCRIPTION
div* string	(Required) The target div that VP Vertical Player will replace.
config* JSON	(Required) Configuration options defining how the player should be rendered.

Configuration

Configuration properties are detailed throughout this documentation.

Setup Process

To set up VP Vertical Player, follow these steps:

1. Import the vpVerticalPlayer script:

   <script src="https://host.vpplayer.tech/vertical-player/v1.0.0/vpplayer-vertical.js"></script>

2. Create a div element with a unique ID for the player:

   <div id="vp-vertical-player"></div>

3. Initialize the player by calling vpVerticalPlayer with the ID of the div created in step 2:

   const player = vpVerticalPlayer("vp-vertical-player");

4. Define the basic options inside the configuration object, such as the video file path:

   const configuration = {
       video: {
           file: "the_video_file_path",
       },
   };

5. Lastly, call the setup method with the configuration object:

player.setup(configuration);

That's it! Your VP Vertical Player should now be set up and ready to use.

Setup Example

VP Vertical Player Example

Example configuration with the following settings:

• Responsive 9:16 aspect ratio
• Playback rate controls enabled
• Localization set to English
• Sharing enabled

<div style="position:relative; overflow:hidden; padding-bottom:56.25%">
    <iframe
        src="https://host.vpplayer.tech/vertical-player/rbqcdwzly/vjsnkiko.html"
        width="100%"
        height="100%"
        frameborder="0"
        scrolling="auto"
        title="VP Vertical Player Demo"
        style="position:absolute;"
        allowfullscreen
        allow="fullscreen">
    </iframe>
</div>

• View the configuration here.
• View the script implementation here.