Overlay Banner Ad with Close delay

Code Tutorial

I. First you need some css rules for overlay HTML elements that your should enter into your website CSS stylesheet file.

/* Player parent DIV  */
.play-parent {
	width:100%;  /* width depends on your layout and needs  */
	position:relative;
	overflow:hidden;
}
/* Semi-transparent DIV element to cover entire player */
.div-over {
	background:rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:99;
	display:none;
	overflow:hidden;
}
/* Centered DIV element for our banner ad */
.overlay {
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	display:inline-block;
}
/* Close button */
.over-close {
	width: 28px;
	height: 28px;
	position: absolute;
	top:10px;
	right:10px;
	line-height:28px;
	text-align:center;
	font-size:18px;
	font-family: sans-serif;
	background:#fff;
	cursor:pointer;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}
.over-close:after {
	content: '';
	height: 16px;
	border-left: 2px solid #222;
	position: absolute;
	transform: rotate(45deg);
	left: 13px;
	top:6px;
}
.over-close:before {
	content: '';
	height: 16px;
	border-left: 2px solid #222;
	position: absolute;
	transform: rotate(-45deg);
	left: 13px;
	top:6px;
}
.div-over .no-click {
	pointer-events:none;
}
.div-over .no-click:before, .div-over .no-click:after {
	border-width:0;
}

II. Now you are ready to setup video element, player code and banner overlay on page. Find full code example below.

<!--Load player skin, videojs and nuevo plugin-->
<link href="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<script src="../video.min.js"></script>
<script src="../nuevo.min.js"></script>

<!--Video tag setup-->
<div class="play-parent">
	<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="..//examples/assets/images/poster.jpg">
		<source src="//devnuevo.com/media/video/demo_720.mp4" type="video/mp4">
		<source src="//devnuevo.com/media/video/demo_720.webm" type="video/webm">
	</video>
	<div class="div-over">>
		<div class="overlay">
		<!--Your Banner Ad Code Here.-->
		<!--This can be any HTML, including Ad code from any Advertising Network (javascript, iframe, etc)-->
		</div>
		<div class="over-close no-click">
	</div>
</div>

<!--Initialize the player and plugin-->
<script>
	var player = videojs('player_1');
	/* Initialize Nuevo plugin with any set of options */
	player.nuevo({ 
		//option_1: option_value,
		//option_2: option_value
	}); 
	/* Include code for Banner Ad once player ready */
	player.ready(function(){
		 var show_on_start = true;
		 var close_delay = 5;
		 var player_ = this;
		 var parent = this.el().parentNode;
		 console.log(parent.id);
		 var closeBtn = parent.querySelector('.over-close');
		 var overlay = parent.querySelector('.div-over');
		 var timer;
		 function delay() {
			clearTimeout(timer);
			if(parseInt(close_delay)>0) {
				closeBtn.innerHTML=close_delay;
				var timer =window.setTimeout(delay, 1000);
				close_delay--;
			} else {
				closeBtn.innerHTML='';
				closeBtn.className='over-close';
			}
		 }
		 function showOverlay() {
			console.log('delay:'+close_delay);
			if(parseInt(close_delay)>0) {
				delay();
			} else {
				closeBtn.className = 'over-close';
			}
			overlay.style.display='block';
		 }

		 closeBtn.addEventListener('click',function(e) {
			overlay.style.display='none';
			player_.play();
		 }, false);

 		 this.on("pause", function(){
			if (!this.seeking() && this.paused()) {
				showOverlay();
			}
		 });
		 this.on('play', function(e) {
			overlay.style.display='none';
		 });
		 if(show_on_start) {
		   // Show overlay on start
			this.pause(); showOverlay();
		 } else {
			overlay.style.display='none';
		 }
	});
</script>