Video.js Tutorial - Part 3: Using Plugins
The great thing about video.js is that there are lots of plugins to let you customize your player to almost anything you need Just visit the plugin page and pick what you'd like. But our tutorial today will talk about videojs-background plugin which allows you to use video as background of any HTML element! This is the plugin project page. Most plugin setup process is fairly simple. Just include the .js file and put it into your web directory I've placed the videojs-background.js along with the .html and video files in my web directory Here is my HTML page with a simple div... I'll demonstrate how to use video.js and its plugin to apply the <body> video background (the black area) First, we'll insert the HTML5 <video> tag just like we did in the previous tutorial into the <body> tag (or any other <div> up to you) Apply the video-js class. Set width and height to 100% and don't forget to set the player as loop. (Noted that we don't need to use the data-setup attribute) Next, we'll include video.js in the <body> tag. (The plugin won't work if we put it in the <header> tag) and then, include the videojs-background.js next to video.js Next, add a script to initialize the video.js and plugin Simply call videojs('element-id').Background() Let's refresh the page and see the result The video was brought to the top instead of behind the white div as we still need to apply the final CSS style. Let's get back to the plugin page and copy the CSS and put it to our page and refresh... This conclude video.js plugin tutorial! Like or subscribe if you like :)
https://youtu.be/A6pMwa8ibgQ
