1.0.1 • Public • Published

videojs-overlay-hyperlink 🔗

A simple video.js plugin to display hyperlinks during video playback using overlays.

This plugin is built upon popular video.js plugin called videojs-overlay.

Static Preview


Live Demo: Link


Click here to download videojs-overlay-hyperlink or git clone it into your production directory.

git clone

Getting Started

First of all, import the plugin's javascript and css files into your webpage.

<!-- js -->
<script src="path/to/js/video.js"></script>
<script src="path/to/js/videojs-overlay-hyperlink.js"></script>
<!-- css -->
<link href="path/to/css/video-js.css" rel="stylesheet">
<link href="path/to/videojs-overlay-hyperlink.css" rel="stylesheet">

After importing, your HTML document should look something like this.

Define Hyperlink

Add another javascript to define your target hyperlink, just assign yourLink variable with your preferred value.

<script type='text/javascript'>
  var yourLink = "";

Configure Setup

The main section of your setup, where you can configure the positioning and duration of the hyperlink.

    (function(window, videojs) {
        var player = window.player = videojs('videojs-overlay-player');
            content: '<a href=# onclick="location.href=yourLink;return false;">Checkout More Documentaries on Oceans</a>',
            debug: true,
            overlays: [{
                start: 0,
                end: 15,
                align: 'bottom-left'
            }, {
                start: 15,
                end: 30,
                align: 'bottom'
            }, {
                start: 30,
                end: 45,
                align: 'bottom-right'
    }(window, window.videojs));

Meaning of the plugin options:


Type: String, Element, DocumentFragment Default: "This overlay will show up while the video is playing"

This setting can be overridden by being set on individual overlay objects.

The default HTML that the overlay includes.


Type: Array Default: an array with a single example overlay

An array of overlay objects. Here you can define your hyperlink name, and this overlay object should consist of:

  • start (String or Number): When to show the overlay. If its value is a string, it is understood as the name of an event. If it is a number (in seconds), the overlay will be shown when that moment in the playback timeline is passed.
  • end (String or Number): When to hide the overlay. The values of this property have the same semantics as start.


Type: String Default: "top-left"

This setting can be overridden by being set on individual overlay objects.

Where to display overlays, by default. Assuming the included stylesheet is used, the following values are supported: "top-left", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left".

See also:

Package Sidebar


npm i videojs-overlay-hyperlink

Weekly Downloads






Unpacked Size

24.7 MB

Total Files


Last publish


  • anuditverma