Overlay Banner Ad

Overlay Ad Tutorial

I. First we need few elements and css styles taht 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;
	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;
}

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

<!--Head tag CSS-->
<link href="../videojs/skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />

<!--Load videojs and nuevo plugin-->
<script type="text/javascript" src="../videojs/video.min.js"></script>
<script type="text/javascript" src="../videojs/nuevo.min.js"></script>

<!--Video tag setup-->
<div class="play-parent">
	<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="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">
	</div>
</div>

<!--Initialize the player and plugin-->
<script>
	var player = videojs('player_1');
	player.nuevo({ 
		//option_1: option_value,
		//option_2: option_value
	}); 
	player.ready(function(){
		 var show_on_start = true;  <!--// Set true to show overlay banner before video start-->

		 <!--// Find overlay elements-->
		 var parent = player.el().parentNode;
		 var closeBtn = parent.querySelector('.over-close');
		 var overlay = parent.querySelector('.div-over');
		 <!--// Close overlay and play media file on close button click-->
		 closeBtn.addEventListener('click',function(e) {
			overlay.style.display='none';
			player.play();
		 }, false);
		 <!--// Show overlay on Pause event-->
 		 this.on("pause", function(){
			if (!this.seeking() && this.paused()) {
				overlay.style.display='block';
			}
		 });
		 <!--// Hide overlay on Play event-->
		 this.on('play', function(e) {
			overlay.style.display='none';
		 });
		 if(show_on_start) {
			player.pause(); overlay.style.display='block';
		 } else {
			overlay.style.display='none';
		 }
	});
</script>