# Overlay Banner Ad

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="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />

    <!--Load videojs and nuevo plugin-->
    <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">
    	</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