Sådan oprettes: Fuldskærm video

Lær hvordan du opretter en fuldskærm video baggrund med CSS.

Sådan opretter du fuldskærm video

Første trin - Tilføj HTML:

<!-- Video -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- Valgfrit: nogle tekstoverlæg for at beskrive videoen -->
<div class="content">
  <h1>Overskrift</h1>
  <p>Lorem ipsum...</p>
  <!-- Brug knappen til at pause/afspille videoen via JavaScript -->
  <button id="myBtn" onclick="minFunktion()">Pause</button>
</div>

Trin 2 - Tilføj CSS:

/* Indstil videoens stil: 100% bredde og højde for at dække hele vinduet */
#myVideo {
  position: fastlåst;
  højre: 0;
  nederst: 0;
  min-bredde: 100%;
  min-højde: 100%;
}
/* Tilføj noget indhold til bunden af videoen eller siden */
.content {
  position: fastlåst;
  nederst: 0;
  baggrund: rgba(0, 0, 0, 0.5);
  farve: #f1f1f1;
  bredde: 100%;
  fyld: 20px;
}
/* Indstil stilen for knappen, der bruges til at pause/afspille videoen */
#myBtn {
  bredde: 200px;
  skriftstørrelse: 18px;
  fyld: 10px;
  kanter: ingen;
  baggrund: #000;
  farve: #fff;
  markør: pekere;
}
#myBtn:hover {
  baggrund: #ddd;
  farve: sort;
}

Trin 3 - Tilføj JavaScript:

Eller, du kan tilføje JavaScript, og videoen kan pauses eller afspilles ved at klikke på knappen:

Eksempel

<script>
// Få fat i videoen
var video = document.getElementById("myVideo");
// Få fat i knappen
var btn = document.getElementById("myBtn");
// Sæt video i pause eller afspilning og ændr knaptekst
function minFunktion() {
  hvis (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } ellers {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

Try it yourself