Overlay Banner Ad

Best of Guitar

Due to many requsts we prepared a tutorial how to display Banner Ad over player on PAUSE event. Example code also allows to display Banner Ad before video start as well.

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>

Set var show_on_start = false; to skip overlay Banner Ad before video start