Video.js Player Overlay Ad

November 9, 2019

Certainly many of you have seen Banner Ad centered over video player when you pause playback. This is a simple but effective technique to increase Ads revenue. Unfortunately, such solution cannot be set through player or plugin code. Banner Ad is usually generated by Ad Company on the fly through javascript or iframe object and shows once website HTML interpreted by the browser. So the Ad Banner code must be a part of HTML, not generated by a player.

Still, it is possible to interact with player events and manipulate independent HTML content in any way you want, including Advertising Banner display.

In this article we will guide you how to show the overlay Banner Ad centered vertically and horizontally, showing on top of player on each PAUSE event. Provided technique you can use for video.js player with or without Nuevo plugin. You can use it for any other player if it only allows access to video events. You can even use it for native HTML5 player.

First look at player example below.

<.div>

First, we need 3 new elements with appropriate css style for our overlay banner: main element that covers the entire player object, the second element for Banner Ad and finally some close button. In the example above we use SVG image for a simple close button. See CSS rules:

Code snippet

#my_overlay {
	background:rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:99;
	display:none;
	overflow:hidden;
}
#my_overlay .overlay-in {
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	display:inline-block;
}
#my_overlay .overlay-close {
	width: 28px;
	height: 28px;
	background:url(/images/overlay svg);
	background-size:28px 28px;
	top:10px;
	right:10px;
	cursor:pointer;
	position:absolute;
}

Now you can setup video element on the website and insert your Banner Ad code. Remember to wrap it all in one parent div element.

Code snippet

<div>
   <video id="player1" class="video-js vjs-fluid vjs-default-skin"  poster="path-to-poster-image" controls preload="auto" playsinline>
      <source src="path-to-video-file" type="video/mp4">
      <source src="path-to-video-file" type="video/webm">
   </video>
   <div id="my_overlay">
      <div class="oberlay-in">
         // Banner Ad Code Here.
      </div>
      <div class="overlay-close"></div>
   </div>
</div>

Banner Ad code can be any HTML code, including code from your Ad Company, e.g. javascript or iframe code. In the example above this is iframe from our client's website.

Of course in the end you need some javascript code to interact with player events in order to show and hide Banner Ad. For video.js player with Nuevo plugin first initalize both in standard way and build javascript functions to control Banner Ad object over player element.

Code snippet

<script>
//Initialize player and plugin
var player = videojs("player1");
player.nuevo({
   // possible options list here
});

// Set relative position for player and overlay parent <div> element
player.el().parentNode.style.position='relative';
// Get overlay element
var overlay = document.querySelector("#my_overlay");

// Show banner ad on pause event
player.on("pause", function(){
    if (!player.seeking() && player.paused()) {
       overlay.style.display="block";
    }
});
// Hide banner ad on playing event
player.on("playing", function(){
      overlay.style.display="none";
});
// Hide banner ad on overlay click (close) and ply video
overlay.onclick = function() {
 overlay.style.display="none";
  player.play();
}
</script>

In the code example above we simply change overlay "display" status. You can also show/hide overlay with more elegant fade effect using jQuery original functions or a custom javascript fade functions, e.g.

jQuery

Code snippet

   player.on("pause", function(){
       if (!player.seeking() && player.paused()) {
         $("#my_overlay").fadeIn();
       }
   });
   player.on("playing", function(){
      $("#my_overlay").fadeOut(); player.play();
   });
   $("#my_overlay").click(function() {
      $("#myoverlay").fadeOut(); player.play();
   });

On small devices, smaller browser size like a smartphone in portrait mode, the overlay Banner Ad part that exceeds player size is hidden, but close button remains in place and is easy to click in order to hide Banner Ad.

Video.js Player Overlay Ad

Newsletter