How to Use the Free Customization Settings

The free version provides full control over the player behavior, player controls, and style dimensions.

Select your block and look under the Settings tab in the right sidebar. You can toggle these options:

• Repeat: Turn this toggle on to make the video play in a continuous loop.
• Autoplay: Turn this toggle on to make the video start playing automatically when a user visits your page.
• Muted: Turn this toggle on to mute the video audio by default.
• Reset On End: Turn this toggle on to restart the video timeline and display the play button when the video finishes.
• Auto Hide Control: Turn this toggle on to automatically hide the control bar when the viewer stops moving their mouse.

NOTE: Most modern web browsers will block autoplaying videos unless they are muted. Keep the Muted toggle turned on if you enable Autoplay.

Selecting a Custom Poster Image

A poster image is the thumbnail picture that shows before your video starts playing:

Find the Poster URL field under the Settings tab in the right sidebar.

Click the media upload button to select a high-quality image from your Media Library or paste an external image URL into the field. The selected image will appear as the video thumbnail before playback starts.

Managing Player Controls

Click the Controls tab in the right sidebar panel to toggle specific buttons on or off:

• Play Large: Shows a large play button in the center of the video screen.
• Restart: Displays a dedicated button to easily restart the video.

• Rewind / Fast Forward: Adds 10-second seek backward and forward buttons.
• Play: Shows or hides the standard play button on the control bar.
• Progress: Shows the video timeline bar.
• Current Time / Duration: Displays the current playback time and total video length.
• Mute / Volume: Toggles the audio speaker icon and volume slider.
• PIP: Enables Picture-in-Picture mode so viewers can watch your video in a floating window.
• Airplay: Allows streaming to AirPlay-supported devices.
• Settings: Shows a settings gear icon for speed adjustment.
• Download: Toggles a download button so viewers can save the video file directly.
• Fullscreen: Adds a button to let viewers expand the video to fill the screen.

Adjusting Video Dimensions and Styling

Click the Style tab in the right sidebar panel to customize size and corners:

Width: Enter a value and select the unit (px, em, or %) to resize the player width.

Round Corner: Enter a pixel value (for example, 12px) to round the corners of your video.

How to Use the Shortcode Generator

If you want to use the video player in other page builders (like Elementor or Divi) or insert it inside text areas, use the built-in Shortcode Generator:

Navigate to your WordPress admin dashboard and open:

Video Players → Add New Video Player.

Enter a title for your video player and customize the player settings using the editor options.

Once your setup is complete, click the Publish button from the right sidebar. After publishing, copy the generated shortcode (for example: [video_player id=123]) from the shortcode column or directly from the editor screen.

Type /shortcode inside the WordPress page or post editor where you want to display the video player. This will open the block inserter and allow you to add the Shortcode block quickly.

After adding the shortcode placeholder, paste this shortcode anywhere on your site to display your video.

Save/publish the page and click View to preview the video player.

How to Manage Plugin Performance & Settings

The Video Player Block admin dashboard provides utility controls to optimize site performance and manage database cleanup:

Access the Dashboard: Go to Video Players > Help & Demos in your WordPress sidebar menu.

Disable Unused Player Blocks: Select the Blocks tab. You will see a list of the four block engines (HTML5 Video Player, React Video Player, VideoJS Player, and Vidstack Video Player). Toggle off any player engines you do not plan to use. This disables their registration in the Gutenberg block inserter, keeping your editor clean and fast.

Configure Database Cleanup on Uninstall: Select the Settings tab. Turn on the Delete Data on Uninstall toggle. When enabled, deleting the plugin from WordPress will automatically and permanently purge all custom video player posts, saved configurations, view tracking metadata, and options from your database.

Keep this disabled if you wish to temporarily delete the plugin files, but keep your data for future use.

How to Choose and Set Up Pro Player Blocks

Once you activate the Pro version, you will see three new dedicated Gutenberg blocks inside your block list:

How to Configure Advanced Pro Features

Let us set up the powerful features available in your Pro blocks (such as Vidstack or React Video Player).

Setting Up HLS or DASH Streams

Add the Vidstack Player block to your page or post, then open the Media & Source panel from the right sidebar and locate the Video URL field to add your streaming or video source link.

Paste your stream link ending in .m3u8 (HLS) or .mpd (DASH).

The engine will detect the streaming type and play it without any buffer delays.

Managing Multilingual Tracks and Subtitles

To add subtitles in different languages:

Select your Pro player block and look in the right sidebar under Tracks & Subtitles.

Click the Add Track button. Paste or upload your .vtt subtitle file link in the URL box.

Enter a descriptive subtitle name in the Label field, such as English, then add the appropriate language code in the Language field, such as en-US.

Select Captions or Chapters in the Kind dropdown list.

Turn the Default toggle on if you want this track to load automatically.

Click Add Track again to add more languages.

Setting Up Seek Preview Thumbnails

To show visual hover preview thumbnails when viewers seek through the video timeline:

Select your Pro player block and open the Tracks & Subtitles panel from the right sidebar. In the Thumbnails URL (.vtt) field, paste the URL of your sprite thumbnail VTT file, such as https://example.com/thumbnails.vtt, to enable seek preview thumbnails on the video timeline.

Hovering over the progress bar on the live player will now display frame-by-frame image previews.

Custom Aspect Ratios and Dimensions

Pro engines let you control layout ratios perfectly:

Open the Dimensions panel from the right sidebar and choose an aspect ratio such as 16:9, 4:3, 21:9, 1:1, or 9:16 from the dropdown menu. If you prefer a fixed player height, enter a custom value like 500px in the Height field. Leave the field empty to let the selected aspect ratio automatically calculate the height responsively.

Configuring Smart Load Strategies

Make sure your website pages load incredibly fast by configuring loading strategies:

Open the Player Behavior panel from the right sidebar and select a loading method from the Load Strategy dropdown list to control when the video player loads on the page.

Eager: Loads the video player immediately on page load.

Visible: Delays loading the video until the user scrolls down and the player becomes visible.

Play: The player does not load any video files until the viewer clicks the Play button.

Set the Preload option to Metadata to only fetch basic duration details, saving server bandwidth.

Configuring Premium Styles, Colors, and Glassmorphism

To design premium layouts that match your brand aesthetics:

Select your Pro block and open the Style tab in the sidebar panel.

Color Customization: Use the color selectors to set your Primary Color (for seek bar and active states), Secondary Color, Text Color, Icon Color, and Menu/Control Backgrounds.

Glassmorphism Backdrop Blur: Toggle and adjust the Control Backdrop Blur range slider (up to 20px) to apply a premium frosted-glass blur filter behind control bars.

Player Box Shadow: Use the Player Shadow controller to customize the offset, blur, spread, and shadow color of your video container.

Adjust Corner Radius: Fine-tune the Control Border Radius, Menu Border Radius, and Player Container Border Radius range sliders to create sharp, moderately rounded, or pill-style layouts.

How to Confirm Your Setup Is Working

Let us test and verify that your video player is working correctly:

Click the blue Publish or Update button at the top-right corner of your editor.

Click the View Page or View Post pop-up alert at the bottom.

Visually verify that your customized video player displays beautifully on your site.

Click the Play button to confirm that the video loads quickly and plays smoothly without interruptions. Then test the player on your mobile phone or tablet to ensure it scales properly and remains fully responsive across all screen sizes.

Next Steps

Awesome! You successfully installed and configured your first Video Player Block.