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;
		});*/
creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Timeline style07

Timeline style07

Scroll to div ID

Scroll to div ID

Responsive image grid

Responsive image grid

Organization Chart

Organization Chart

Input range slider HTML style01

Input range slider HTML style01

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Carousel Bootstrap4

Carousel Bootstrap4

Card Profile Style01

Card Profile Style01

Card 4 Product Style01

Card 4 Product Style01

Background div gradient

Background div gradient

Ajouter multiple input dynamique

Ajouter multiple input dynamique