0.1.8 • Public • Published


WARNING: Highly early project. The stable version of this project has not been released (Release v1.0.0) and should not be used in production.

VideoJS Skin like YT.


This is a component to connect other supported VideoJS plugins and use to make the VIdeoJS like YT. We also improve some original VideoJS experience.

Connect to other VideoJS Plugin (Checked means support, unchecked means it will be supported in the future):

And more (You can tip me on Issues).

Table of Contents


npm install --save videojs-yt-style

Package out from NPM

git clone
cd videojs-yt-style
npm install
npm run build-offline

Now you can take build/ out to anywhere.


To include videojs-yt-style on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-yt-style.min.js"></script>
  var player = videojs('my-video');



When using with Browserify, install videojs-yt-style via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.

var player = videojs('my-video');



When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-yt-style'], function(videojs) {
  var player = videojs('my-video');


Added Features


Show a bezel bar in player.

Added Component

  • BezelText : bezel text element
  • BezelTextWrapper : bezel text wrapper element
  • Bezel : Control the whole bezel action

Added Component Method

You can call following method like: player.getChild('Bezel').something();.

  • getChild('Bezel').display(string) : Show specific text 0.5s


Add the fps attributes to player.

Added Player Attributes

  • fps_.fps (Type: Integer) : evaluated video fps
  • fps._certainty (Type: Integer) : evaluate certainty

Added Player Methods

  • fps(value) (Return type: Integer) : return the evaluated video fps

Added Player Events

  • fpsupdate : evaluate fps updated

Keep timetooltip in seekbar

Add a player option to keep time tooptip in seeb bar.

Original this PR.

Added Player Options

  • keepTimeTooltipInSeekBar (Type: Boolean) : Prevents the time tooltip overflow the seek bar

Progress bar padding

Add a component to progress bar, use it to grow user can hover the progress bar size.

You can use the .vjs-progress-bar-padding css class to set the style.

Size property

Add some css var of player size.

Added CSS Variables

  • --player-width (Unit: Pixel) : player width
  • --player-height (Unit: Pixel) : player height

Subtitle Manager

A better way to control subtitle.

Added Player Attributes

  • subtitles : This is a subtitle manager instance, you can found all method in source src/js/components/subtitle-manager.js.

Keep volume

Keep volume setting in localStorage.

Full window mode

Include is only full window and fullwindow toggle manager.

Added Player Options

  • alwaysEnableFullWindow (Type: Boolean) : Always has are full window button.

Added Player Methods

  • isOnlyFullWindow() (Type: Boolean) : Check if only full window is supported.

Get duration correctly

Add player method to fix live source can not get duration problem.

Added Player Methods

  • getDuration() (Type: Number) : Get source duration.

Fix progress

Fix VideoJs ProgressBar is slow when dragging with Mouse. problem:

Code from:


UNLICENSED. Copyright (c) Ami-OS <>



Package Sidebar


npm i videojs-yt-style

Weekly Downloads






Unpacked Size

274 kB

Total Files


Last publish


  • ami-os