Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a responsive Video Player using Video.js
In this tutorial, we'll look at how to use video.js to create a responsive video player. A responsive video player is one that resizes itself to fit the size of the screen.
By creating a responsive video player, we ensure that our video player is never cropped from the sides and is always presented fully, regardless of the device or screen size. Having a consistent player will also enhance the viewing experience of the end user.
Let's move ahead to the next section of the article and learn how to make the video player responsive using video.js.
Creating a Responsive Video Player using Video.js
Creating a responsive video player or making a video player responsive is very easy using the video.js library.
We just need to use the fluid option reference to the video player and then video.js will handle everything on its own. We don't have to worry about the different screen sizes and the CSS for each of those.
We only need to utilize the 'fluid' option to refer to the video player and after that everything will be handed by video.js on its own. We don't have to worry about the various screen sizes and CSS for each of them.
For adding the 'fluid' video.js option references, there are multiple ways. Let's have a look at each one of them one by one.
Adding 'fluid' method inside data setup
The easiest method to use this option reference is to add 'fluid=true' in the 'datasetup' tag inside the <video> element.
Example
Consider the below code example for creating a responsive video player.
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" data-setup='{ "fluid" : true }' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player = videojs('my-video') </script> </body> </html>
In the above example, you can observe that, we've created a basic video player using <video> tag and class as 'video-js'. 'Fluid=true' has been added inside the 'data-setup' tag.
Now, when you'll execute the above code, the video player will be responsive, i.e., if you change the screen size, the video will resize itself according to the screen.
Using Classes
Alternatively, we can also use the class 'vjs-fluid' instead of using 'fluid=true' in the 'data-setup' attribute.
vjs-fluid' will make the video fluid and will wait for the page to load properly to calculate the aspect ratio of the video. And then that aspect ratio is maintained across the screen.
Consider the following code to use the vjs-fluid class.
class="video-js vjs-fluid"
Otherwise, if you know the aspect ratio of the video or if you want your video to have a certain aspect ratio, then video.js has some predefined aspect ratio classes like 'vjs-16-9', 'vjs-4-3', 'vjs-9-16' and 'vjs-1-1'.
If we use any of the above-mentioned classes, then video.js will maintain the mentioned aspect ratio for our video player across different screens and display sizes.
class="video-js vjs-16-9"
If we use the above code snipped, our video player will maintain an aspect ratio of 12:9 while being responsive.
Example
Consider the fully working HTML example to make the video player responsive using the "vjs-fluid" and "vjs-16-9" methods.
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet"/> </head> <body> <video id="my-video" class="video-js vjs-default-skin vjs-fluid" controls preload="auto" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" > </video> <video id="my-video2" class="video-js vjs-default-skin vjs-16-9" controls preload="auto" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player = videojs('my-video') </script> </body> </html>
In the above example, we've used two video elements, one using the 'vjs-fluid' method and the other one using the 'vjs-16-9' aspect ratio method.
When executing the code, you're going to notice that 'vjs-fluid' maintains the aspect ratio of the video and 'vjs-16-9' maintains the 16-9 aspect ratio across all screen sizes.
Using player Methods
If for some reason, you don't want to use the above 2 methods, you can instead use this one which is completely done in the JavaScript part of our code.
You can also enable fluid: "true" in the player method option in the javascript code. Consider the below code to do the same.
// using the fluid method in the videojs options var player = videojs('my-video', { fluid: true }); // using the fluid method to the player reference // creating using videojs var player = videojs('my-video2'); player.fluid(true);
In the above snippet, two ways to use the 'fluid' method are shown in JavaScript. Both ways are doing the exact same thing i.e making the video player responsive by calculating the intrinsic aspect ratio of the video and maintaining that across different screen sizes.
Alternatively, you can again use aspect ratio here so that video.js doesn't need to calculate the intrinsic aspect ratio of the video and forces the one passed in the parameters. Consider the code snippet below to use the aspect ratio for our video player in the <script> tag.
// using the aspectRatio method in the videojs options var player = videojs('my-video', { aspectRatio: '16:9' }); // using the aspectRatio method int the player reference // creating using videojs var player = videojs('vid2'); player.aspectRatio('16:9');
In the above code, two ways to use the 'aspectRatio' method have been shown. In both ways, video.js will use the 16:9 aspect ratio and will maintain it on all screen sizes and hence making our video player responsive.
Example
Consider the below fully working code example for using the 'fluid' and 'aspectRatio' method for making our video player responsive.
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" > </video> <video id="my-video2" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player1 = videojs('my-video', { fluid: true }); var player2 = videojs('my-video2'); player.aspectRatio('16:9'); </script> </body> </html>
In the above example, we've used two video elements, with id as 'my-video' and 'myvideo2' respectively. We used video.js reference to pass the fluid and aspectRatio method to the video player.
When executing the code, you'll observe that the video player using 'fluid' method maintains the aspect ratio of the video and the other video player which used the aspectRatio function maintains the 16:9 aspect ratio across all screen sizes.
Conclusion
In this tutorial, we understood how to create a responsive video player using video.js. We learned multiple methods to make a video player responsive by using fluid and using aspect ratios with the help of an example for each of the methods.
4K+ Views
