# Overlay Banner Ad with Close delay

On some websites you can find Overlay Banner Ad which you can close only after some delay in time.
See video example and tutorial how to do it.

## 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>

Set var show_on_start = false; to skip overlay Banner Ad before video start.
Set var close_delay = x; to any seconds number to delay close button active.
Example video above shows banner ad on video start and use 5 second delay to activate close button.