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";
  }
}
Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style05

Timeline style05

Timeline style03

Timeline style03

Simple Table With UIKIT

Simple Table With UIKIT

Planète animée style01

Planète animée style01

Loading style water animation

Loading style water animation

Image hover 03

Image hover 03

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Buttons Styles Inspirations

Buttons Styles Inspirations

Blog post card 01

Blog post card 01

Background div gradient

Background div gradient

Arrows Defense Game

Arrows Defense Game