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;
		});*/
toggle switch style03

toggle switch style03

bootstrap4 tabs

bootstrap4 tabs

Timeline style02

Timeline style02

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Pagination with Jquery

Pagination with Jquery

Manual Slideshow

Manual Slideshow

Image hover 04

Image hover 04

Form login b4 01

Form login b4 01

Form contact avec validation en css

Form contact avec validation en css

Form Création de compte style animée

Form Création de compte style animée

Card 4 Product Style01

Card 4 Product Style01

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery