Next Popular Module


    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:


    npm i videojs-overlay-hyperlink

    DownloadsWeekly Downloads






    Unpacked Size

    24.7 MB

    Total Files


    Last publish


    • anuditverma