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
How to play YouTube videos using Video.js player?
In this tutorial, we're going to learn the procedure to play YouTube videos using the video.js player. Video.js is a very popular modern web video player which supports all the latest video formats including YouTube, Vimeo, etc.
Now, we'll see how the video.js library can be used for playing YouTube videos using the 'videojs-youtube' package.
For playing YouTube videos in the video.js player we need to install a package 'videojs-youtube' in our project. Installation of the package is very easy and can be done using bower or node package manager.
Installing video.js YouTube
Use the following command for installation of 'videojs-youtube' using npm −
npm install videojs-youtube
If you are using bower as your package manager, then 'videojs-youtube' can be installed using the below command
bower install videojs-youtube
Running the above commands in the terminal of your project, will install the package and we can start using it by importing 'dist/Youtube.min.js' file. Consider the below code snippet for adding video.js YouTube package in the project.
<script src="../dist/Youtube.min.js"></script>
Path the file correctly as it is very important for the package to work properly.
Now that we've added and imported the package in our project, lets learn how we can actually play YouTube videos using it.
Playing YouTube Videos using the Video.js YouTube Package
For playing a YouTube video, we need to make some changes in the data-setup attribute to the video element tag.
First, we need to set the techOrder option in data-setup as 'youtube'. Secondly, we have to pass the sources array, with the video URLs and their mime type as 'video/youtube' in data-setup as parameters.
Consider the below code for adding a YouTube video to the video element −
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{"techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }' >
As you can observe, in the code snippet, we've set the tech order as YouTube and passed the sources array.
Notice that the sources tag is of array type which contains an array of JSON objects where each object has the type and URL of the video that we want to play. We can add multiple JSON objects for multiple videos. Also, make sure the type of video is 'video/youtube'.
Note− We've removed the <source>tag, and added it in the data-setup attribute.
Example 1
The complete example of including the video.js YouTube plugin and playing a YouTube video in the video player will look something like this.
<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-big-play-centered" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojsyoutube/2.6.1/Youtube.min.js"></script> var player = videojs('my-video'); </script> </body> </html>
Note − Please update the correct path of the youtube.min.js file in the <script> tag.
The execution of above code is going to create a video player in your web browser and the video being played will be a Tutorialspoint YouTube video with the following URL − https://www.youtube.com/watch?v=xjS6SftYQaQ
You'll notice that our video player has video.js default controls. If you want to change the YouTube controls, then we need to pass one more option in data setup attribute called 'ytControls'. Since controls is a keyword in video.js by default this one is called 'ytControls'.
Example 2
Adding YouTube controls in the above example −
<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-big-play-centered" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] },"youtube": { "ytControls": 2 }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojsyoutube/2.6.1/Youtube.min.js"></script><script> var player = videojs('my-video'); </script> </body> </html>
If you execute the above code will display the youtube controls on our video player instead of the default video.js controls.
Now, we've created a video player which plays YouTube videos and changed the controls to YouTube controls. You can also set additional parameters on the video player using the 'customVars' parameter.
For example, if we need to set the window mode of the player as transparent, we can do so by
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }, "youtube": { "ytControls": 2, "customVars": { "wmode": "transparent"} }'
The complete working example of youtube video player using 'ytControls' and 'customVars' will look something like this.
Example
<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-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }, "youtube": { "ytControls": 2, "customVars": { "wmode": "transparent"} }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
Execution the above example is going to create a youtube video player with youtube controls and the window mode as set to transparent. You can use any video.js option with the video.js YouTube package.
Conclusion
In this tutorial, we understood how to play YouTube videos using video.js. First, we imported the video.js YouTube plugin, which is responsible for playing YouTube videos in our video player. Later, we learned how to display the YouTube controls instead of the default video.js controls with the assistance of an example.
3K+ Views
