Videojs Text Overlay

In this fiddle we will look at how to add text on top of videos using videojs player.

by GiriAakula

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />
</head>
<body>
   
        <video
          id="my-video"
          class="video-js vjs-big-play-centered"
          controls
          preload="auto"
          width="640"
          height="360"
          poster=""
          data-setup="{}"
        >
          <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
          <source src="MY_VIDEO.webm" type="video/webm" />
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank"
              >supports HTML5 video</a
            >
          </p>
        </video>
      
        <script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>
        <script>
            let playerInstance = new videojs("my-video");
           playerInstance.on("ready", () => {
           		  let div = document.createElement("div");
                    div.innerHTML = `
                    <p style=" margin: 0; color: black; font-size: 5rem; position: absolute;">Giri Aakula</p>
                    `;
                    console.log(playerInstance)
                    playerInstance.el().appendChild(div)
           })
        </script>
</body>
</html>