Vidéo background en html5 style01

<!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>
<video autoplay muted loop id="videoOne">
  <source src="../../assets/video/Home-Slider-2-mini.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div class="content">
  <h1>Title title</h1>
  <p>
    Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. 
    Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.
  </p>
  <button id="btnAction" onclick="getVideo()">Pause</button>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#videoOne {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#btnAction {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#btnAction:hover {
  background: #ddd;
  color: black;
}
var video = document.getElementById("videoOne");
var btn = document.getElementById("btnAction");

function getVideo() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
Pure CSS Percentage Circle

Pure CSS Percentage Circle

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Input range slider HTML style05

Input range slider HTML style05

Image hover style border top

Image hover style border top

Image hover Inspiration styles

Image hover Inspiration styles

Form login with background image changed style01

Form login with background image changed style01

Form Création de compte

Form Création de compte

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Background div gradient

Background div gradient

Asidebar Menu Style01

Asidebar Menu Style01

Alert Bootstrap4 style02

Alert Bootstrap4 style02