Simple title overlay plugin for VideoJS

Usage no npm install needed!

<script type="module">
  import videojsTitleoverlay from '';



Title Overlay plugin for VideoJS

This plugin is used to add a simple title overlay for video js. Usage is as follows:

    <video id="id_for_videoplayer" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
        <source src="PATH-TO-VIDEO-FILE" type='FILETYPE'>

    <script src="PATH-TO/video.js"></script>
    <script src="PATH-TO/videojs-titleoverlay.js"></script>
        var player = videojs('id_for_videoplayer');
        var options = {};

You can specify the following options:

    var options = {
        title: 'My Video Title',  //Title for movie
        floatPosition: 'right', //Float left or right (to prevent big play button overlap) (default left)
        margin: '10px', //Margin from top/left/right (default 10px)
        fontSize: '1.5em', //font size (default 1em)
        debug: false, //true or false. Will output debug messages for title status
        logger: LOGOBJECT //must have a function called log that it can call to, otherwise will use a default basic log func

You can hide/show the title overlay by calling the following:




You can update the title text if you are loading clips in dynamically with the following:

    player.titleoverlay.updateTitle('TITLE TO UPDATE TO');

If you have any questions, please shoot me an email @ or