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;
		});*/
Titre section avec une bande style01

Titre section avec une bande style01

Table Responsive with css 01

Table Responsive with css 01

Radio button style

Radio button style

Pie Charts

Pie Charts

Input range slider HTML style01

Input range slider HTML style01

Image hover style border top

Image hover style border top

Image hover 06

Image hover 06

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Ajouter une pagination1

Ajouter une pagination1

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery