Hur man skapar: Fullskärmsvideo

Lär dig hur man skapar en fullskärmsvideo bakgrund med CSS.

Hur man skapar en fullskärmsvideo

Steg 1 - Lägg till HTML:

<!-- Video -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- Valfritt: några överliggande texter för att beskriva video -->
<div class="content">
  <h1>Rubrik</h1>
  <p>Lorem ipsum...</p>
  <!-- Använd knappen för att pausa/spela upp video med JavaScript -->
  <button id="myBtn" onclick="minFunktion()">Paus</button>
</div>

Steg 2 - Lägg till CSS:

/* Ställ in video-stilen: 100% bredd och höjd för att täcka hela fönstret */
#myVideo {
  position: fast;
  höger kant: 0;
  nedre kant: 0;
  min bredd: 100%;
  min höjd: 100%;
}
/* Lägg till något innehåll under video/sidan */
.content {
  position: fast;
  nedre kant: 0;
  bakgrund: rgba(0, 0, 0, 0.5);
  färg: #f1f1f1;
  bredd: 100%;
  marginal: 20px;
}
/* Ställ in stilen för knappen som används för att pausa/spela upp video */
#myBtn {
  bredd: 200px;
  fontstorlek: 18px;
  marginal: 10px;
  kanter: inga;
  bakgrund: #000;
  färg: #fff;
  pekare: pekare;
}
#myBtn:hover {
  bakgrund: #ddd;
  färg: svart;
}

Steg 3 - Lägg till JavaScript:

Eller, du kan lägga till JavaScript, genom att klicka på knappen kan du pausa/spela upp video:

Exempel

<script>
// Hämta video
var video = document.getElementById("myVideo");
// Hämta knappen
var btn = document.getElementById("myBtn");
// Pausa och spela upp video, och ändra knapptext
function minFunktion() {
  om (video.paused) {
    video.play();
    btn.innerHTML = "Paus";
  } annars {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

Prova själv