Video.js Guides

These guides cover a range of topics for users of Video.js

Video.js Options Reference

Note: This document is only a reference for available options. To learn about passing options to Video.js, see the setup guide.

Standard <video> Element Options

Each of these options is also available as a standard <video> element attribute; so, they can be defined in all three manners outlined in the setup guide. Typically, defaults are not listed as this is left to browser vendors.


Type: boolean|string NOTE: At this point, the autoplay attribute and option are NOT a guarantee that your video will autoplay. NOTE2: If there is an attribute on the media element the option will be ignored. NOTE3: You cannot pass a string value in the attribute, you must pass it in the videojs options

Instead of using the autoplay attribute you should pass an autoplay option to the videojs function. The following values are valid:

  • a boolean value of false: the same as having no attribute on the video element, won't autoplay
  • a boolean value of true: the same as having attribute on the video element, will use browsers autoplay
  • a string value of 'muted': will mute the video element and then manually call play() on loadstart. This is likely to work.
  • a string value of 'play': will call play() on loadstart, similar to browsers autoplay
  • a string value of 'any': will call play() on loadstart and if the promise is rejected it will mute the video element then call play().

To pass the option

var player = videojs('my-video', {
  autoplay: 'muted'

// or


More info on autoplay support and changes:


Type: boolean

Bu default the remaining time display shows as negative time. To not show the negative sign set controlBar.remainingTimeDisplay.displayNegative to false.


Type: boolean

Determines whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the Player API.


Type: string|number

Sets the display height of the video player in pixels.


Type: boolean

Causes the video to start over as soon as it ends.


Type: boolean

Will silence any audio by default.


Type: string

A URL to an image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user hits "play" the image will go away.


Type: string

Suggests to the browser whether or not the video data should begin downloading as soon as the <video> element is loaded. Supported values are:


Start loading the video immediately (if the browser supports it). Some mobile devices will not preload the video in order to protect their users' bandwidth/data usage. This is why the value is called 'auto' and not something more conclusive like 'true'.

This tends to be the most common and recommended value as it allows the browser to choose the best behavior.


Load only the meta data of the video, which includes information like the duration and dimensions of the video. Sometimes, the meta data will be loaded by downloading a few frames of video.


Don't preload any data. The browser will wait until the user hits "play" to begin downloading.


Type: string

The source URL to a video source to embed.


Type: string|number

Sets the display width of the video player in pixels.

Video.js-specific Options

Each option is undefined by default unless otherwise specified.


Type: string

Puts the player in fluid mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3").

Alternatively, the classes vjs-16-9, vjs-9-16, vjs-4-3 or vjs-1-1 can be added to the player.


Type: boolean Default: false

If set to true, it asynchronously hides all player components except the control bar, as well as any specific controls that are needed only for video. This option can be set to true or false by calling audioOnlyMode([true|false]) at runtime. When used as a setter, it returns a Promise. When used as a getter, it returns a Boolean.


Type: boolean Default: false

If set to true, it enables the poster viewer experience by hiding the video element and displaying the poster image persistently. This option can be set to true or false by calling audioPosterMode([true|false]) at runtime.


Type: boolean

Prevents the player from running the autoSetup for media elements with data-setup attribute.

Note: this must be set globally with videojs.options.autoSetup = false in the same tick as videojs source is loaded to take effect.


Type: Object

When used with the responsive option, sets breakpoints that will configure how class names are toggled on the player to adjust the UI based on the player's dimensions.

By default, the breakpoints are:

Class NameWidth Range

While the class names cannot be changed, the width ranges can be configured via an object like this:

breakpoints: {
  tiny: 300,
  xsmall: 400,
  small: 500,
  medium: 600,
  large: 700,
  xlarge: 800,
  huge: 900
  • The keys of the breakpoints object are derived from the associated class names by removing the vjs-layout- prefix and any - characters.
  • The values of the breakpoints object define the max width for a range.
  • Not all keys need to be defined. You can easily override a single breakpoint by passing an object with one key/value pair! Customized breakpoints will be merged with default breakpoints when the player is created.

When the player's size changes, the merged breakpoints will be inspected in the size order until a matching breakpoint is found.

That breakpoint's associated class name will be added as a class to the player. The previous breakpoint's class will be removed.

See the file sandbox/responsive.html.example for an example of a responsive player using the default breakpoints.


Type: Array|Object

This option is inherited from the Component base class.


Type: boolean

When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container at the video's intrinsic aspect ratio, or at a specified aspectRatio.

Also, if the <video> element has the "vjs-fluid", this option is automatically set to true.


Type: Object Default: {options: {navigationUI: 'hide'}

fullscreen.options can be set to pass in specific fullscreen options. At some point, it will be augmented with element and handler for more functionality.


Type: Object Default: {navigationUI: 'hide'}

See The Fullscreen API Spec for more details.


Type: string

If provided, and the element does not already have an id, this value is used as the id of the player element.


Type: number

Video.js indicates that the user is interacting with the player by way of the "vjs-user-active" and "vjs-user-inactive" classes and the "useractive" event.

The inactivityTimeout determines how many milliseconds of inactivity is required before declaring the user inactive. A value of 0 indicates that there is no inactivityTimeout and the user will never be considered inactive.


Type: string, Default: browser default or 'en'

A language code matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.

Learn more about languages in Video.js.


Type: Object

Customize which languages are available in a player. The keys of this object will be language codes and the values will be objects with English keys and translated values.

Learn more about languages in Video.js

Note: Generally, this option is not needed and it would be better to pass your custom languages to videojs.addLanguage(), so they are available in all players!


Type: boolean Default: false

Allows the player to use the new live ui that includes:

  • A progress bar for seeking within the live window
  • A button that can be clicked to seek to the live edge with a circle indicating if you are at the live edge or not.

Without this option the progress bar will be hidden and in its place will be text that indicates LIVE playback. There will be no progress control and you will not be able click the text to seek to the live edge. liveui will default to true in a future version!


Type: number Default: 20

An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 20s on the seekBar then we do not show the new liveui even with the liveui option set.


Type: number Default: 15

An option for the liveTracker component of the player that controls how far from the seekable end should be considered live playback. By default anything further than 15s from the live seekable edge is considered behind live and everything else is considered live. Any user interaction to seek backwards will ignore this value as a user would expect.


Type: boolean

Explicitly set a default value for the associated tech option.


Type: boolean

Specify whether setting autoplay: true and <video autoplay> should be treated the same as autoplay: 'play', i.e. the autoplay attribute should be removed from (or not added to) the video element and play() be initiated manually by Video.js rather than the browser.


Type: string

Allows overriding the default message that is displayed when Video.js cannot play back a media source.


Type: boolean Default: false

Control whether UI elements have a title attribute. A title attribute is shown on mouse hover, which can be helpful for usability, but has drawbacks for accessibility. Setting noUITitleAttributes to true prevents the title attribute from being added to UI elements, allowing for more accessible tooltips to be added to controls by a plugin or external framework.


Type: Array

An array of numbers strictly greater than 0, where 1 means regular speed (100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc. If specified, Video.js displays a control (of class vjs-playback-rate) allowing the user to choose playback speed from among the array of choices. The choices are presented in the specified order from bottom to top.

For example:

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]


Type: Object

This supports having plugins be initialized automatically with custom options when the player is initialized - rather than requiring you to initialize them manually.

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}

The above is roughly equivalent to:

var player = videojs('my-player');{bar: true});{baz: false});

Although, since the plugins option is an object, the order of initialization is not guaranteed!

See the plugins guide for more information on Video.js plugins.


Type: boolean, Defaut: false

Setting this to true will change fullscreen behaviour on devices which do not support the HTML5 fullscreen API but do support fullscreen on the video element, i.e. iPhone. Instead of making the video fullscreen, the player will be stretched to fill the browser window.


Type: boolean, Default: false

Setting this option to true will cause the player to customize itself based on responsive breakpoints (see: breakpoints option).

When this option is false (the default), responsive breakpoints will be ignored.

Note this is about the responsiveness of the controls within the player, not responsive sizing of the pplayer itself. For that, see fluid.


Type boolean or Element, Default: false

If set to true, a copy of the placeholder element will be made before the player is initalised. If the player is disposed, the copy is put back into the DOM in the player's place.

If set to an HTML Element, that element would replace the disposed player instead.


Type: Array

An array of objects that mirror the native <video> element's capability to have a series of child <source> elements. This should be an array of objects with the src and type properties. For example:

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'

Using <source> elements will have the same effect:

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">


Type: boolean

If set to true, then the no compatible source error will not be triggered immediately and instead will occur on the first user interaction. This is useful for Google's "mobile friendly" test tool, which can't play video but where you might not want to see an error displayed.


Type: boolean

Gives the possibility to techs to override the player's poster and integrate into the player's poster life-cycle. This can be useful when multiple techs are used and each has to set their own poster any time a new source is played.


Type: Array, Default: ['html5']

Defines the order in which Video.js techs are preferred. By default, this means that the Html5 tech is preferred. Other registered techs will be added after this tech in the order in which they are registered.


Type: Object

Type: boolean|function

Controls how clicking on the player/tech operates. If set to false, clicking is disabled and will no longer cause the player to toggle between paused and playing. If controls are disabled with controls: false, this will not call the handler function.

videojs('my-player', {
  userActions: {
    click: false

If undefined or set to true, clicking is enabled and toggles the player between paused and play. To override the default click handling, set to a function which accepts a click event (in this example it will request Full Screen, the same as a userAction.doubleClick):

function myClickHandler(event) = {
  // `this` is the player in this context

  if (this.isFullscreen()) {
    } else {

videojs('my-player', {
  userActions: {
    click: myClickHandler


Type: boolean|function

Controls how double-clicking on the player/tech operates. If set to false, double-clicking is disabled. If undefined or set to true, double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set userActions.doubleClick to a function which accepts a dblclick event:

function myDoubleClickHandler(event) = {
  // `this` is the player in this context


videojs('my-player', {
  userActions: {
    doubleClick: myDoubleClickHandler


Type: boolean|function|object

Controls how player-wide hotkeys operate. If set to false, or undefined, hotkeys are disabled. If set to true or an object (to allow definitions of fullscreenKey etc. below), hotkeys are enabled as described below. To override the default hotkey handling, set userActions.hotkeys to a function which accepts a keydown event. If controls are disabled with controls: false, this will not call the handler function.

var player = videojs('my-player', {
  userActions: {
    hotkeys: function(event) {
      // `this` is the player in this context

      // `x` key = pause
      if (event.which === 88) {
      // `y` key = play
      if (event.which === 89) {;

Default hotkey handling is:

KeyActionEnabled by
ftoggle fullscreenonly enabled if a Fullscreen button is present in the Control Bar
mtoggle mutealways enabled, even if no Control Bar is present
ktoggle play/pausealways enabled, even if no Control Bar is present
Spacetoggle play/pausealways enabled, even if no Control Bar is present

Hotkeys require player focus first. Note that the Space key activates controls such as buttons and menus if that control has keyboard focus. The other hotkeys work regardless of which control in the player has focus.


Type: function

Override the fullscreen key definition. If this is set, the function receives the keydown event; if the function returns true, then the fullscreen toggle action is performed.

var player = videojs('my-player', {
  userActions: {
    hotkeys: {
      muteKey: function(event) {
        // disable mute key
      fullscreenKey: function(event) {
        // override fullscreen to trigger when pressing the v key
        return (event.which === 86);


Type: function

Override the mute key definition. If this is set, the function receives the keydown event; if the function returns true, then the mute toggle action is performed.


Type: function

Override the play/pause key definition. If this is set, the function receives the keydown event; if the function returns true, then the play/pause toggle action is performed.


Type: string

Allows overriding the default URL to vtt.js, which may be loaded asynchronously to polyfill support for WebVTT.

This option will be used in the "novtt" build of Video.js (i.e. video.novtt.js). Otherwise, vtt.js is bundled with Video.js.

Component Options

The Video.js player is a component. Like all components, you can define what children it includes, what order they appear in, and what options are passed to them.

This is meant to be a quick reference; so, for more detailed information on components in Video.js, check out the components guide.


Type: Array|Object

If an Array - which is the default - this is used to determine which children (by component name) and in which order they are created on a player (or other component):

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
  children: [

The children options can also be passed as an Object. In this case, it is used to provide options for any/all children, including disabling them with false:

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false


Type: Object

Components can be given custom options via the lower-camel-case variant of the component name (e.g. controlBar for ControlBar). These can be nested in a representation of grandchild relationships. For example, to disable the fullscreen control:

videojs('my-player', {
  controlBar: {
    fullscreenToggle: false

Tech Options


Type: Object

Video.js playback technologies (i.e. "techs") can be given custom options as part of the options passed to the videojs function. They should be passed under the lower-case variant of the tech name (e.g. "html5").



Type: boolean

Only supported by the Html5 tech, this option can be set to true to force native controls for touch devices.


Type: boolean

Can be set to false to disable native audio track support. Most commonly used with videojs-contrib-hls.


Type: boolean

Can be set to false to force emulation of text tracks instead of native support. The nativeCaptions option also exists, but is simply an alias to nativeTextTracks.


Type: boolean

Can be set to false to disable native video track support. Most commonly used with videojs-contrib-hls.


Type: boolean

Can be set to false to delay loading of non-active text tracks until use. This can cause a short delay when switching captions during which there may be missing captions.

The default behavior is to preload all text tracks.