How to Customize Video.js Player Skins?

Video.JSHTML5Web Development

In this tutorial, we're going to learn how to customize the skins of a video player created using video.js. Video.js library allows controlling each and every aspect of your video player. Literally, anything can be configured, from button icons to size to color and much more.

And on top of that, we also can access a lot of pre-built video player themes made by the video.js community. We're going to explore both options in this article.

First, let's start by tinkering with some of the aspects of the default video.js skin.

How to customize Video.js player Skins?

When the Video.js CSS file (video-js.min.css) is included in our code or project, the default Video.js skin is used, which means we can change the appearance of a Video.js player just by using some simple CSS's cascading feature to override styles.

Creating a Skin in VideoJS

In this part of the tutorial, we're going to create a video skin that is going to override the styles of the default video.js player skin and will change the color of all the elements of the default skin to red. This is also the recommended way to create skins in video.js.

Let's add a class named 'vjs-red-theme' to our video element, which we are going to use to override the styles later. Consider the following code snippet for the same.

<video class="video-js vjs-red-theme'">
   // other code
</video>

Now that we've added a new class to our video element, let's start by changing all to the text and icon colors of our video player to red.

Add the following code snippet in the <style> tag −

.vjs-red-theme.video-js {
   color: #ff0000;
}

Here we're are setting the color of vjs-red-theme and overriding the default video.js color to red. So, it is literally that easy to change each and every aspect of the video.js player.

Next, let's also change the border color of the big play button along with the background of all progress bars to red. Add the below code in the <style> tag.

/* Border of big play button */
.vjs-red-theme .vjs-big-play-button {
   border-color: #ff0000;
}
/* Change color of progress bar, volume level and slider*/
.vjs-red-theme .vjs-volume-level,
.vjs-red-theme .vjs-play-progress,
.vjs-red-theme .vjs-slider-bar {
   background: #ff0000;
}

In the above code snippet, we've overridden the default colors of various components of the video.js player using CSS properties like border-color and background.

Example 1

The complete working example for creating a skin to override the default video.js skin will look something like this.

<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> <style> /* Change all text and icon colors in the player to red. */ .vjs-red-theme.video-js { color: #ff0000; } /* Border of big play button */ .vjs-red-theme .vjs-big-play-button { border-color: #ff0000; } .vjs-red-theme .vjs-volume-level, .vjs-red-theme .vjs-play-progress, .vjs-red-theme .vjs-slider-bar { background: #ff0000; } </style> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-red-theme" controls preload="auto" fluid="true" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type='video/mp4' /> </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"> </script> <script> var player = videojs('my-video'); </script> </body> </html>

On execution, the above code will create a video player in the web browser with all the elements of video player colored red. Like, the border of the big play button will be red, and the color of the progress bar will be red, etc.

So, you can override the video.js component and create a skin as per your liking without much hassle.

Note − Make sure that you update the path of the mp4 video file with your video file to make the code work.

In the above example, we included the 'vjs-red-theme' in the as class on our video element. But the same can also be done programmatically with the help of 'addClass' of the video.js player.

Example 2

The following example shows how you can create and add a custom skin in video.js programmatically.

<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> <style> /* Change all text and icon colors in the player to red. */ .vjs-red-theme.video-js { color: #ff0000; } /* Border of big play button */ .vjs-red-theme .vjs-big-play-button { border-color: #ff0000; } .vjs-red-theme .vjs-volume-level, .vjs-red-theme .vjs-play-progress, .vjs-red-theme .vjs-slider-bar { background: #ff0000; } </style> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" fluid="true" poster="my_video_poster.jpg" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/video1.mp4"type='video/mp4' /> </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> <script> var player = videojs('my-video'); player.addClass('vjs-red-theme'); </script> </body> </html>

You can notice that in the above example, we've added the 'vjs-red-theme' on the video player reference using the addClass method. When you notice the above code, you'll notice no difference between this example and the previous example. Because these are just the two ways of adding a class to our video player.

Now that, we've understood how to create a custom skin in video.js, let's have a look at using some of the pre-built themes shared by video.js.

Using a Pre-Build Theme

The themes that we're going to use for the sake of this article are shared by video.js on their Github. You can also search and use custom skins shared by the other members of the video.js community.

For using a pre-build theme, you just need to add the CSS of the theme in our local project and then use the class defined by the theme on our video element to override our default skin.

Example

Consider the below example for using a pre-built theme named 'vjstheme- sea'.

<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> <!-- CSS of the video.js Sea Theme --> <link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet"> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/video1.mp4"type='video/mp4' /></video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> <script> var player = videojs('my-video'); </script> </body> </html>

In the above example, you can see we've imported the CSS of the 'pre-built' theme in the <link> tag and then we've used the 'vjs-theme-sea' class in the video element.

On execution, you'll see that the user interface of the video player is completely redesigned and it looks very clean and minimal.

Using a custom skin with a video.js player is very easy and straightforward. You can find the skin used in the second part of the article and many more themes on the following link − https://github.com/videojs/themes

Conclusion

In this tutorial, we had a look at how to customize video.js player skins. First, we understood how to create a custom video.js skin and the process to use it in our project. In the later part of the tutorial, we imported a pre-built skin and applied it to our video player.

raja
Updated on 03-Oct-2022 14:00:14

Advertisements