How To Use

Super Video Player Features

This section covers all the essential features that come with the free version of the player. Each feature is explained clearly, allowing you to understand its purpose and how it enhances your video playback experience. It helps you get familiar with the core tools you’ll use the most.

Free features

You can control these features from both the plugin’s CodeStar settings panel and the block settings inside the Gutenberg editor.

Setting Panel

Go to your admin dashboard and click on the Super Video Player > Add new item

Write the new item title

After that, you can see here video source and the poster image so that you can submit here video source and insert your poster images.

If you want, you can set a caption or subtitle on your video. Here, only receive vtt file.

Here are some features available to see below:

1. Repeat: Plays the video again automatically after it ends.
2. Muted: Starts the video with the sound turned off.
3. AutoPlay: Starts playing the video as soon as the page loads.
4. Video Width: Lets you set the player width to match your layout.

That’s it!

Premium Features

This section highlights the advanced tools and enhancements available in the Pro version. These features are designed to give you more flexibility, control, and customization options. You’ll learn how each premium feature works and how it can upgrade your overall player experience.

Video Playlist Management

Easily add and organize multiple videos into a playlist.

You see the Playlist option and have a button to Add New. Click it and see the info options below:

1. Video Title
2. Video Description
3. Video Source or Upload video
4. Insert video poster image

If you want more and more video, just click the Add New button click

Adaptive Video Quality

Choose and switch between different video resolutions.

You see the Video Quality Option and have a button to Add New. Click it and see the info options below:

1. Insert Resolution
2. Submit video Source

Controls Visibility

Show or hide any video player controls as needed.

Initial Video Volume

Set the starting volume for your video playback.

Initial Video Seek Time

Set the starting point of the video in seconds.

Video Control Tooltips

Enable or disable tooltips for player controls.

Custom Video Layout

Choose from multiple themes and layout styles.

You see here Playlist Layout options, and have here the default layout with more than 3 layouts below:

1. Default Layout
2. Horizontal Layout
3. Vertical Layout
4. Grid Layout

Default Playlist Layout

This option loads a clean, ready-made playlist style that works out of the box. It organizes your videos neatly and keeps the player layout simple, clear, and easy for viewers to navigate.

Horizontal Playlist Layout

This layout displays your playlist in a horizontal row under the player, giving it a modern, compact look. It’s perfect for showcasing multiple videos while keeping the design clean and easy to browse.

Vertical Playlist Layout

This layout shows your playlist in a vertical list beside the player. It’s ideal for longer playlists, offering a clear, scrollable structure that makes it easy for viewers to browse and switch between videos.

Grid Layout

This layout displays your videos in a clean, multi-column grid. It’s great for showcasing many videos at once with equal focus, giving your playlist a modern and visually organized appearance.

Video Title & Description

Add a title and description to display with your video.

Continuous Playback on Playlist

Play all videos in a playlist automatically without interruptions.

Social Share Button On Player Block Setting

Let viewers easily share your video on social media directly from the player.

Click the share icon

And after that, you see the modal share option

All Features Available On Block Setting

Access and customise every feature directly within the Gutenberg editor.

Easily manage your videos without leaving your post or page.

Settings

Let’s see the Settings of the Super Video Player plugin. Navigate to the Super Video Player > Settings.

You will see there are some settings, such as-

Color, Style, and Player Translation

Go to Color Settings from Settings to set Primary and Secondary Colors.

Super Video Player- Color Settings

Style

Select Style Settings from Settings. Here you can write Custom CSS.

Player Translation

The Player Translation option lets you translate the video player text into your own language or change the wording to match your site.

Go to Settings → Player Translation to see all the text used in the video player buttons and menus. You can edit these labels one by one.

Here, you can translate or change text such as Play, Pause, Restart, Volume, Mute, Fullscreen, Captions, Download, and Speed. You can also update time-related labels like current time, duration, and buffered. Other labels include Enabled, Disabled, Reset, and ad text.

After saving, the video player will show your translated text on the front end. This helps visitors understand the player controls in their own language.

Note: Please don’t touch any text between round brackets {}, those are dynamic variables, e.g., {currentTime}

ShortCode Usage

Use the provided shortcode to easily embed the video player on any post or page.

Simply copy and paste it where you want the player to appear.

You see there on top of the page on the CodeStar framework. You can easily find the short code with the Gutenberg block and framework page.

Display Video Player

Single Video Player Display shows here.

And Another Display Here

You see here Playlist:

Playlist: 1

Playlist: 2

Playlist: 3

Playlist: 4

That’s it.