Some css

countdown.js

(function() {

videojs.plugin('countdown', function() {

    var player = this;

      // //Place overlay at top of video on loadedmetadata
      // myPlayer.overlay({
      //   overlays: [{
      //    "content": "<p>Ad : <span id='timeTarget'></span> seconds</p>",
      //    "align": "top",
      //    "start" : "loadedmetadata"
      //   }]
      // });

      //Initially  hide the overlay
      // player.addClass("hide-overlay");

      //Listen for ad events per best practice
      player.on('ad-load',function(){
        var theInterval,
          timeLeftInAd;

        //Function to be called every second during ad playback
        //Calculates time remaining and injects into overlay
        function everySecond() {
          document.getElementById('timeTarget').innerHTML = Math.floor( myPlayer.ads.pod.duration -  myPlayer.ads.pod.currentTime());
        };

        //On start of ads in pod
        player.on('ads-ad-started',function(){
          //Remove the hide class so overlay displays
          player.removeClass("hide-overlay");
          //Start the counter that calls function every second
          theInterval = setInterval(everySecond, 1000);
        });

        //On end of ads in pod
        player.on('ads-ad-ended',function(){
          //Stop the counter
          clearInterval(theInterval);
          //Hide the overlay
          player.addClass("hide-overlay");
          //Clear any numbers so on display of overlay no small numbers left
          document.getElementById('timeTarget').innerHTML = '';
        });
      });
});
});

overlay.css

/*! videojs-overlay - v0.0.0 - 2014-4-26
 * Copyright (c) 2014 Brightcove
 * Licensed under the Apache-2.0 license. */

/**
 * Some handy default styles for overlays.
 */
.vjs-overlay {
  position: absolute;
  width: 33%;
  background-color: #646464; /* IE8 fallback */
  background-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  top: 5px;
  left: 5px;
  text-align: center;
}

/* Video reset styles */
.video-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

/* overlay alignment styles */
}
.vjs-overlay.vjs-overlay-top-left {
    width: 100%;
    background-color: none; /* IE8 fallback */
    background: rgba(0,0,0,0.2);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(50%, rgba(0,0,0,0.2)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0) 100%);
    color: #fff;
    opacity: 0.8;
    text-shadow: 0 0 4px rgba(0,0,0,0.75);
    margin: 0;
    border-radius: 0px;
    top: 0px;
    left: 0px;
    text-align: left;
    font-size: 0.8em;
}

.vjs-overlay.vjs-overlay-top {
  margin-left: 0;
  left: 0;
}
.vjs-overlay.vjs-overlay-top-right {
  left: auto;
  right: 5px;
}
.vjs-overlay.vjs-overlay-left {
  top: 50%;
  margin-top: -15px;
}
.vjs-overlay.vjs-overlay-right {
  left: auto;
  right: 5px;
  top: 50%;
  margin-top: -15px;
}
.vjs-overlay.vjs-overlay-bottom {
  margin-left: -16.5%;
  left: 50%;
  top: auto;
  bottom: 4.5em;
}
.vjs-overlay.vjs-overlay-bottom-left {
  bottom: 4.5em;
  top: auto;
  left: 5px;
}
.vjs-overlay.vjs-overlay-bottom-right {
  bottom: 4.5em;
  top: auto;
  left: auto;
  right: 5px;
}

.vjs-big-play-button {
    display: none;
}

/* hide the overlay */
.hide-overlay .vjs-overlay {
    display: none;
}