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;
		});*/
up down tr in table with js

up down tr in table with js

Timeline style03

Timeline style03

Manual Slideshow

Manual Slideshow

Loading style book loader

Loading style book loader

Input range slider HTML style04

Input range slider HTML style04

Image hover 06

Image hover 06

Image hover 01

Image hover 01

Form login 02

Form login 02

Form contact avec validation en css

Form contact avec validation en css

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu