Documentation:

The following plugin options are used to control the overlay object:

• align:
  • The value must be a supported string value.
  • This defines where to show the overlay. If you include the default stylesheet, the following values are supported: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left.
• attachToControlBar:
  • The value can be a string or boolean. If the value is a string, the value must be the name of a ControlBar component.

  • If set to true or a string value, bottom aligned overlays will adjust positioning when the control bar minimizes. This has no effect on overlays that are not aligned to bottom, bottom-left, or bottom-right. The option is for use with the default control bar, and may not work for custom control bars. Bottom aligned overlays will be inserted before the specified component. Otherwise, bottom aligned overlays are inserted before the first child component of the ControlBar. All other overlays are inserted before the ControlBar component.

  • The option can set for all eligible alignments by using it at the top level:

    // required parameters:
    brand: "agnoplay",
    videoId: "Mbdskc9KsAii",
    url: window.location.href,
    ...
    // add the following:
    overlayEnabled: true,
    overlay: {
      content: 'Default overlay content',
      attachToControlBar : true,
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left'
      }],
    },
    

    Or for individual overlay objects:

    // required parameters:
    brand: "agnoplay",
    videoId: "Mbdskc9KsAii",
    url: window.location.href,
    ...
    // add the following:
    overlayEnabled: true,
    overlay: {
      content: 'Default overlay content',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left',
        attachToControlBar : true
      }],
    },
    

    A top level setting can be overridden by option use on individual overlay objects.

• class:
  • A custom HTML class to add to overlay elements. You define the style as you would any class selector, with the exception that you must use the .video-js selector along with the selector you choose (the specificity must be increased so the style is not overridden):

    
    .video-js .customOverlay {
      color: yellow;
      background-color: red;
    }
        

  • The option can set for all eligible alignments by using it at the top level:

    // required parameters:
    brand: "agnoplay",
    videoId: "Mbdskc9KsAii",
    url: window.location.href,
    ...
    // add the following:
    overlayEnabled: true,
    overlay: {
      content: 'Default overlay content',
      class: 'customOverlay',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }],
    },
        

    Or for individual overlay objects:

    // required parameters:
    brand: "agnoplay",
    videoId: "Mbdskc9KsAii",
    url: window.location.href,
    ...
    // add the following:
    overlayEnabled: true,
    overlay: {
      content: 'Default overlay content',
      overlays: [{
        class: 'customOverlay',
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        class: 'customOverlay2',
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }],
    },
    

    A top level setting can be overridden by option use on individual overlay objects.

• content:
  • The value can be a string or DOM object.
  • This is the HTML that will be contained in the overlay. You can pass in a string, an HTML element or a DOM DocumentFragment.
  • The default value is the string This overlay will show up while the video is playing.
  • This option can be set at the top level, or for individual overlay objects.
• end:
  • The value can be a string or number.
  • This defines when to hide an overlay. If the value is a string, it is interpreted as an event name. If it is a number, the overlay will be hidden when that time (in seconds) in the video playback has passed. If the value is a string, it is interpreted as an event name, like play, pause or ended. A list of all player events is located in the Events.
• overlays:
  • An array of overlay objects.
  • An overlay object should consist of at least an start and end option. Other options used as desired.
• showBackground:
  • The value is boolean.
  • Determines whether or not to include background styling & padding around the overlay. This setting can be overridden by being set on individual overlay objects.
• start:
  • The value can be a string or number. This defines when to show an overlay.
  • If it is a number, the overlay will be displayed when that time (in seconds) in the video playback has passed.
  • If the value is a string, it is interpreted as a event name, like play, pause or ended. A list of all player events is located in the Events
  • Here's an example that displays overlay text before the video starts playing:

    // required parameters:
    brand: "agnoplay",
    videoId: "Mbdskc9KsAii",
    url: window.location.href,
    ...
    // add the following:
    overlayEnabled: true,
    overlay: {
      content: '<strong>Default overlay content</strong>',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears before the video starts playing',
        start: 'loadstart',
        end: 'play'
      }],
    },
    

All of these properties are optional, but you may get strange results if you don't include at least the start and end properties.