Vidéo background en html5 style02

<!DOCTYPE HTML>
<html>
<head>
  <title>Background vidéo HTML5 | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="Background vidéo HTML5">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<header>
		<h1 id="bay31">
		   Portfoler<span style="font-size:16px;color:#5bc0de">beta</span>
		</h1>
		<div id="cadre">
		   <h1>Votre moteur de recherche</h1>
		</div>
		<br><br>
		<div id="screenPlay" class="screen">
		  <img src="play.png"/>
		</div>
		<div id="screenPause" class="screen">
		  <img src="pause.png">
		</div>
		<div id="formulaire">
			<form action="#" >
			   <input type="text" placeholder="Nom de la boutique" />
			   <input type="submit" value="Chercher" />
			</form>
		</div>
		<video autoplay muted loop id="myVid" preload="auto">
		  <source src="../../assets/video/Home-Slider-2-mini.mp4" type="video/mp4">
		  Your browser does not support HTML5 video.
		</video>
		<!--
		<button id="vidPlay">Play</button>
		<button id="vidPause">Pause</button>
		<button id="vidStop">Stop</button> -->
	</header>
	<section>
	</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
*{
	margin:0;
	padding:0;	
}

body{
	margin:0;
	padding:0;
	font-family:"karia","Arial";
	font-size:27px;
	color:#000;
	overflow:hidden;
	background-color:rgb(36,36,36);
	width:100%;	
}

header,footer,nav,section,article,aside{
	display:block;
	width:auto;
	height:auto;
}	
ul,li,h1,h2,h3,h4,h5,h6,span,p{
	margin:0;
	padding:0;
}		
a{
	text-decoration:none;
    color:green;
}	
.hide{
	display:none;		
}
			
#myVid{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
}
		   
#cadre{
	color: #FFFFFF;
    height: 100px;
    left: 10px;
    line-height: 14px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 1;
}		   
.screen {
	 width:100%;
	 background:rgb(0,0,0,0.59);
	 height:100%;
	 position:absolute;
	 top:0;
	 left:0;
	 z-index:1;
}
#formulaire{
	width:500px;
	height:119px;
	position:absolute;
	top:60%;
	left:27%;
	z-index:3;
}			
#formulaire input[type=text]{
	background:rgb(235,235,235);
	text-align:center;
	border:1px solid rgb(190,190,190);
	height:40px;
	width: 482px;
	margin: 14px 93px auto;
	border-radius: 13px;
	display:block;
}		
#formulaire input[type=submit]{
    border-radius: 10px;
    background-color: #0C8DC4;
    border: none;
    display: block;
    width: 190px;
    height: 40px;
    margin: -42px 594px auto;
    color: #FFF;
    font-size: 22px;
    cursor: pointer;
    padding: 2px;
    line-height: 30px;
    text-align: center;
}			
#bay31{
	color: #FFFFFF;
	left: 0;
	line-height: 14px;
	position: absolute;
	text-align: center;
	top: 35%;
	width: 100%;
	z-index: 1;
	font-size:80px;
}	
#logowhite{
	left: -66px;
	position: absolute;
	top: 5%;
	z-index: 1;
}		
		
				
				
				 
$(function(){

	var myVid = document.getElementById('myVid');
	
	$('#myVid').fadeOut(0);
	$('.screen').fadeOut(0);
	
	setTimeout(function(){
		$('#myVid').fadeIn(15000);
		myVid.volume= 0;
		myVid.play(); 
	},1500);
	
	$('#myVid').click(function(){
		
		if(myVid.paused){
			
			myVid.play(); 
			
			$('#screenPlay').fadeIn(100,function(){
				$('#screenPlay').fadeOut(800);
				});
				
		}else{
			
			myVid.pause(); 
			
			$('#screenPause').fadeIn(100,function(){
				$('#screenPause').fadeOut(800);
				});
		}
		
		});
		
});
	

	/*$('#vidPlay').click(function(){
		myVid.play(); 
		});
		
		$('#vidPause').click(function(){
		myVid.pause(); 
		});
		
		$('#vidStop').click(function(){
		myVid.pause(); 
		myVid.currentTime =0;
		});*/
login page green one

login page green one

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style06

Timeline style06

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Nav Menu style01

Nav Menu style01

Lightbox gallery style01

Lightbox gallery style01

Input range slider HTML style02

Input range slider HTML style02

Form login with background image changed style01

Form login with background image changed style01

Create icon animate with svg

Create icon animate with svg

Compteur avec b4

Compteur avec b4

Card Bootstrap4 01

Card Bootstrap4 01

Bootstrap4 datepicker

Bootstrap4 datepicker