How To Use

How To Use Media Player Addons for Elementor

YouTube Video Player Widget 

Ready to stop linking out to YouTube and start embedding videos directly? This tutorial shows you exactly how to use the YouTube Video Player Widget from the Media Player Addons for Elementor Pro.

Discover how to keep your audience engaged on your website by providing instant video access, customizing the player to match your brand, and controlling the viewing experience, all without any coding.

To get started, simply follow the instructions to add the YouTube Video Player widget to your page.

Step 01:

Add the YouTube Video Player widget directly from your Elementor panel. Just drag and drop it into any section to place your video.

Step 02:

In the Content Tab, you can add your YouTube video link to the media player and set a custom poster image.

Choose whether to show the player controls (like play, pause, and volume) using the settings in the Player Controls Settings section.

Adjust the size of player control icons and progress bar thumbnails in the Player Other Settings section.

Step 03:

Match the player to your site’s branding. In the Style tab, find the Video Player Color Settings to change the color of the play button, other icons, and the seeker thumbnail.

Step 04:

Finally, click on the Publish button to save and apply your changes.

Perfect! Your YouTube video is now live and ready to play directly on the page.

That’s it!

HTML5 Video Player Widget

Hosting your own videos is useful when you want full control over how they look on your site.  The HTML5 Video Player widget lets you upload the file and style the player the same way you’d style anything else in Elementor.

I like it mainly because you don’t have to touch code, and the end result feels more consistent with the rest of the page.

To get started, simply add the HTML5 Video Player widget to your page by following the provided configuration steps.

Step 01:

To add your self-hosted video, simply open your Elementor panel, locate the HTML5 Video Player widget, and drag it directly into any section on your page where you want the video to appear.

Step 02:

In the Content Tab, upload your video file (like MP4) or add the external video link and set a custom poster image that displays before playback begins.

In the Player Controls section, you can choose to show or hide the playback interface, including the play button, progress bar, and volume control.

Adjust the size of player control icons and progress bar thumbnails in the Player Other Settings section.

Step 03:

Within the Style tab, locate the Player Color Settings to modify the color scheme of all interactive elements, including the play button, control icons, and the progress bar indicator.

Step 04:

Click the Publish button to save all changes and make your HTML5 video player live on the page.

Excellent! Your self-hosted video is now successfully embedded and ready for visitors to play directly on your page.

That’s it.

Vimeo Video Player Widget

You can easily bring high-quality Vimeo videos into your website without messing with complicated embeds. With the Vimeo Video Player widget, you just add the video and adjust the design so it feels consistent with the rest of your page or your overall brand style.

The viewers get to watch the video without any distractions from the website. Everything is done through Elementor’s visual editor, so you do not need to have technical about code.

To begin, integrate the Vimeo Video Player widget into your page by following the simple configuration steps outlined in our documentation.

Step 01:

To begin, open your Elementor editor and find the Vimeo Video Player widget in the panel. Simply drag and drop it into the section where you want your video to appear.

Step 02:

Go to the Content Tab and paste your Vimeo video link in the designated field. You can also set a custom poster image that will display before the video starts playing.

In the Player Controls settings, choose whether to display video controls. You can show or hide buttons like play, pause, volume, and fullscreen to match your preferred viewing experience.

Navigate to the Player Other Settings, section to customize the size of your control icons and progress bar elements, ensuring optimal visibility and user experience.

Step 03:

In the Style tab, use the Player Color settings to customize your video controls. Change the color of the play button, all control icons, and the progress bar to perfectly match your website’s branding.

Step 04:

Finalize your setup by clicking the Publish button. Your Vimeo video is now ready for viewers!

Done! Your Vimeo video is now live and ready to play on your page.

HTML5 Audio Player Widget 

Launch your audio on your terms. Upload your MP3 files, design a player that reflects your brand, and hit play on a professional listening experience, all with the no-code HTML5 Audio Player Widget for Elementor.

To start, simply add the HTML5 Audio Player widget to your page by following the provided documentation steps.

Step 01:

To get started with your custom audio, open the Elementor panel, find the HTML5 Audio Player widget, and drag it into the section where you’d like your audio to be featured.

Step 02:

To configure your audio source, navigate to the Content Tab, where you can either upload a local audio file (such as MP3, WAV, or OGG formats) or provide an external audio stream URL.

Within the Player Controls settings, you can enable or disable the visibility of the playback interface, including the play/pause button, seek bar, and volume slider, based on your design preferences.

Step 03:

Navigate to the Style tab and access the Player Color Settings to customize the appearance of all interactive components. You can modify the color of the play button, adjustment icons, and the progress bar tracker to align with your website’s visual identity.

Step 04:

When you’re ready, click the Publish button to save all your settings and make your audio player visible on your live website.

Perfect! Your HTML5 audio player is now live and ready for visitors to press play.

Art Video Player Widget

Create a stunning video gallery on your website with ease. Using the Art Video Player Widget for Elementor, you can upload your videos directly, design a beautiful player that matches your style, and offer visitors a smooth viewing experience, all without any technical skills.

To get started, add the Art Video Player widget to your page by following the included setup instructions.

Step 01:

To place a video on your page, open your Elementor panel, find the Art Video Player widget, and drag it to your preferred section.

Step 02:

In the Content Tab, upload your video file (such as an MP4) or provide an external video link. You can also set a custom poster image that will be shown before the video starts playing.

You can enhance accessibility by adding subtitles to your video through the Player Subtitle Settings section. This feature supports uploading subtitle files (such as .srt or .vtt formats) or linking to external subtitle sources

You can customize the progress bar’s appearance by modifying its color through the Player Color Settings section.

Within the Player Controls settings, for the Art Video Player, you can choose to show or hide interactive elements, including the play/pause button, progress bar, and volume controls, to align with your design requirements.

Step 03:

Click the Publish button to save your settings and make your Art Video Player live for all visitors to see.

That’s it! Your setup is now complete and fully operational.

dPlayer Video Player Widget

Build a dynamic, modern video hub on your website. With the dPlayer Video Player Widget for Elementor, you can seamlessly integrate your videos and customize a sleek, high-performance player. Tailor its look to your brand and deliver a fluid, buffer-free viewing experience throughout an intuitive, visual interface that requires zero coding or technical expertise.

To configure the dPlayer, please follow the official setup instructions provided in the documentation.

Step 01:

To get started, simply drag the dPlayer Video Player widget from the Elementor menu and drop it into any section where you want your video to appear.

Step 02:

Within the Content Tab, you can either upload a local video file (MP4 format recommended) or specify an external video URL. Additionally, configure a custom poster image to display as a preview before video playback initiates.

The dPlayer includes comprehensive subtitle support through its dedicated Subtitle Settings section. You can either upload local subtitle files (.srt/.vtt formats) or provide external subtitle URLs to make your video content accessible to a wider audience.

The dPlayer offers complete customization of your video interface. You can manage control visibility, configure theme colors, and adjust font sizes all through a centralized settings panel for seamless brand integration.

Step 03:

Once your dPlayer is configured, click the Publish button to activate all settings and make your video player publicly visible on your website.

Your dPlayer is now fully operational and ready for public viewing.

Advance Video Player Widget

The Advanced Video Player Widget for Elementor enables you to deploy sophisticated video solutions with extensive customization options. Configure a high-performance player with advanced controls, style every element to match your corporate identity, and deliver a premium, uninterrupted streaming experience all managed through a professional visual interface designed for both power and ease of use, requiring no development resources.

To set up the Advanced Video Player, follow the comprehensive step-by-step instructions provided in the official documentation.

Step 01:

To begin using the Advanced Video Player, simply locate the widget in your Elementor panel and drag it into your desired page section where you want the video player to display.

Step 02:

In the Content Tab, you can upload your MP4 video file and add a custom poster image and title that will be shown as a preview before the video begins playing.

You can customize the video player’s display by accessing the player options. From there, you may adjust the playback width and height, as well as select your preferred viewing theme (Dark or Light mode).

Step 03:

Click Publish to finalize your configuration and activate the player for your audience.

Configuration complete. The player is active and ready for your audience.

Advance Audio Player Widget

Deploy an audio experience on your website. Customize a high-performance player with advanced controls, style every component for a seamless brand integration, and guarantee a premium, buffer-free stream. All achievable through a professional visual interface, designed for power and simplicity.

To configure the Advanced Audio Player, follow the detailed, step-by-step guide in our official documentation.

Step 01:

To start crafting your audio experience, locate the Advanced Audio Player widget in the Elementor panel and place it into your desired page section.

Step 02:

In the Content Tab, upload your primary audio file (e.g., MP3, WAV) and define its preview identity. This includes adding a cover art image and a track title that will be displayed before playback begins.

Customize the player’s presence. Access settings to control its dimensions( player size) and visual theme (Dark or Light mode).

Step 03:

Click Publish to activate your player and begin streaming.

Setup is ready. Your audio player is now live and operational.

Audio Player Playlist Widget

Construct a high-performance playlist with intuitive controls, style the entire interface for brand harmony, and ensure a premium, gapless playback experience. All achievable within a professional visual editor, designed for both capability and ease.

To build and configure your Audio Player Playlist, follow the comprehensive, step-by-step guide in our official documentation.

Step 01:

To begin building your audio playlist, find the Audio Player Playlist widget in the Elementor panel and place it onto your page.

Step 02:

To create your playlist, access the Content Tab and utilize the ‘Add Item’ feature to incorporate your selected audio files.

Configuring its associated metadata is the standard professional term for setting details like title, album, and artist.

Configure the player’s visual presentation within the playlist settings, including theme selection (Dark/Light) and display size. 

Step 03:

Click Publish to launch your curated playlist and begin the broadcast.

That’s it! Your audio collection is now active and ready for listeners.

Advance Video Player Playlist Widget

You can build smooth, professional video playlists on your site without relying on complicated tools. This widget lets you organize multiple videos into a single player, control how each clip behaves, and keep everything styled to match your brand. It feels like a proper media experience, and viewers can watch from start to finish without interruptions or buffering getting in the way.

To produce and fine-tune your Advanced Video Player Playlist, follow the systematic instructions provided in our official documentation.

Step 01:

To create your video playlist, simply drag the Advanced Video Player Playlist widget from the Elementor panel and drop it into your page section.

Step 02:

To build your playlist, navigate to the Content Tab and use the ‘Add Item’ feature to import and organize your video files.

Define its essential metadata the standard professional practice for specifying video details such as title, description, and source.

Set the visual stage for your playlist. Within the playlist settings, set the player’s theme (Dark/Light) and scale its visual footprint on the page.

Step 03:

All set! Click Publish to make your playlist public.

All set! Your video series is now ready to stream.

Advance Audio Playlist Widget

Build professional audio playlists. Features include gapless playback, custom branding, and advanced track management, all controllable from the Elementor interface.

For complete setup and configuration of your Advanced Audio Playlist, please refer to the systematic guide in our official documentation.

Step 01:

To start, position the Advanced Audio Playlist widget by dragging it from the Elementor panel directly into your page build area.

Step 02:

To construct your playlist, access the Content Tab and utilize the ‘Add Item’ function to import and manage your audio tracks.

Establish its track metadata, the professional methodology for cataloging audio information such as title, creator, and collection.

Configure the player’s interface. Within the playlist settings, enable or disable the playback timer and adjust the widget’s display dimensions.

Step 03:

Customize the player’s appearance in the Style Tab, including the background image, color scheme, shadow effects and others.

Step 04:

Click Publish to finalize your configuration and launch the playlist.

Setup complete. Your audio playlist is now live and ready for listeners.