There’s no denying that, given a choice, most Internet users today would prefer to watch a short video rather than read a few paragraphs of text. Therefore, one of the best ways to quickly increase your WordPress site’s traffic and click-through rates is to add video content to it. To display such content, you will, of course, need a flexible video player.
Stellar Video Player, a premium WordPress plugin available on CodeCanyon, is among the most powerful and customizable video players you can get your hands on in 2019. Created by Envato award winning author Creative Media, this plugin supports a variety of video formats, several popular video hosting services, and live streaming too.
In this tutorial, I’ll show you how to add it to your WordPress site and display different types of video content with it.
Prerequisites
To follow along, all you need is:
- WordPress 4.4.1 or higher
- and a CodeCanyon account
1. Installing Stellar Video Player
The Stellar Video Player WordPress plugin is available as a premium item on CodeCanyon.
Once you a purchase a license for it, you’ll be able to download it as ZIP file, which contains both its source code and documentation.
After you extract the ZIP file, you’ll have access to a plugin archive named Stellar-video-player.zip, using which, you can install the plugin in just a few clicks.
Start by opening the admin panel of your WordPress site and navigating to the Plugins > Add new section. Then press the Upload plugin button and choose the plugin archive.
Finally, press the Install now button to begin the installation.
After a successful installation, make sure you click on the Activate link shown below the plugin to activate it.
At this point, you can start using the plugin.
2. Creating a New Player
The Stellar Video Player plugin allows you to create multiple video players for your WordPress site. Each player will have its own unique shortcode, which you can use to embed it in your posts or pages.
To create your first player, go to Settings > Stellar Video Player in the admin panel.
In the page that opens, press the Create New Player button.
You’ll now be prompted to specify the type of videos you want your new player to play. Stellar Video Player can currently play self-hosted videos, videos from YouTube, and videos from Vimeo.
For now, let’s create a player that can play MP4 files you have direct access to. So choose the HTML5 (self-hosted) option and press the Add Video button.
In the configuration panel that pops up, you must point the player to your self hosted video. Feel free to use the URL of any MP4 file that’s present on your WordPress server. Alternatively, you can use MP4 files you have on cloud platforms such as Google Drive, Amazon S3, and DropBox.
It’s worth noting that the Stellar Video Player plugin allows you to specify two URLs for the same video: one for an HD quality version and another for an SD quality version. By providing both versions, you can be sure that your users have an optimal experience even when they’re on a slow Internet connection.
Next, you must add a title and a description to your video. Optionally, you can even associate a thumbnail image with it.
Leave the rest of the fields unchanged and press the Save changes button.
If you want to add more videos to the same player, go ahead and press the Add Video button again.
3. Using the Player
Now that your first video player is ready, you can return to the dashboard of the Stellar Video Player plugin to take a look at its shortcode.
Note that this WordPress plugin always generates easy-to-remember shortcodes based on the ID of the player. For example, if the ID of your player is 1, its shortcode will be [Stellar_video_player id="1"].
To add the player to any post on your site, all you need to do is type in the shortcode at the desired location. Here’s a screenshot showing you how:
Once you publish the post and visit it, you’ll be able to see your new player in action.
4. Customizing the Player
If you aren’t satisfied with the current look of the video player, you can customize it by going to its Player settings page, where you’ll have access to dozens of configuration options. For instance, in the General options section, you can change details such as the aspect ratio of the player, the size of its progress bar, the controls it shows, and its dimensions.
If you want to change the overall theme of your player, however, you must go to the Layout & Design section. Currently, this plugin offers two full-fledged themes: a dark theme and a light theme. The player you created in the previous step, by default, uses the dark theme. Here’s what it will look like if you switch to the light theme.
Additionally, in the same section, you can change the accent color the player uses.
In the Functionality section, you can configure how your player behaves after it has finished playing a video. By default, it plays the next video in its playlist.
Lastly, if you don’t want to allow your users to easily download your videos, you can go to the HTML5 player section and enable the Hide video source option.
5. Adding Advertisements
With the Stellar Video Player plugin, monetizing your videos is extremely easy because it allows you to add a variety of advertisements to them.
The plugin currently allows you to add the following ads to any of your self-hosted videos:
- a pre-roll video ad, which plays before your video starts
- a mid-roll video ad, which is served during the course of a long video
- a post-roll video ad, which plays after the video
- and a pop-up image ad, which can be shown any time during the video
To show these ads, go to the Video settings section of your player. Here, each type of ad has three important form fields: a switch to turn the ad on or off, an input field where you can type in the URL you want users to be redirected to when they click on the ad, and an input field where you can specify the location of the ad’s MP4 file.
Optionally, if you want to allow your users to skip watching the ads after a few seconds, you can use the Skip timer (sec) field.
After filling in the fields, finalize them by pressing the Save changes button. If you return to your blog now, you’ll see that your player plays the ad MP4 files at appropriate times.
6. Embedding YouTube Videos
The player you created in earlier steps can handle only videos you have direct file access to. If you want to be able to display YouTube or Vimeo videos in your blog, you’ll have to create a different type of player.
To create a separate player for YouTube videos, press the Create New Player button again in the player management page. This time, in the Video settings section, choose the YouTube option and press the Add Video button.
You’ll see that you’re presented with a slightly different configuration form now. In this form, you specify the video you want to play by typing in its unique YouTube ID. Additionally, you can specify which part of the video you want to play using the start on second and end on second fields.
The rest of the configuration options are identical to those of the self-hosted player. This means, you can add various ads, a custom thumbnail, and a custom title to the video.
As always, submit the form by pressing the Save changes button.
If you embed this player in a post, it will look like this:
If you want this player to play more than one video, you can return to its Video settings page and press the Add Video button again. However, if you want to play a lot of YouTube videos, you can save time and effort by using a different type of player.
The Stellar Video Player plugin allows you to easily embed an entire playlist of YouTube videos, or even all videos from a YouTube channel. To create a player that supports this feature, you must choose the YouTube playlist option or the YouTube channel option while creating your player. Then, all you need to do is type in the playlist ID or the channel ID.
7. Using a Lightbox
The Stellar Video Player plugin allows you to play your videos inside a modal window too. Using this feature can lead to a better user experience because it darkens the rest of the page and allows the user to focus only on the video.
To enable this feature, go to the Player settings > Lightbox options section of any player you’ve created already and enable the Lightbox mode option. Once you do so, your video player will look like this:
Conclusion
In this tutorial, you learned how to integrate the Stellar Video Player WordPress plugin with your WordPress site. You also learned how to display videos, playlists, and advertisements with it without writing a single line of code.
The players you create with this WordPress plugin look good on almost all modern browsers, both desktop and mobile. They’re very lightweight too.
To learn more about the plugin, do refer to the documentation present in the ZIP file you downloaded.
If you want to learn more about video player plugins for WordPress, check out some of our other posts here on Envato Tuts+.