Πώς να δημιουργήσετε: Ολοκληρωτικό βίντεο

Μάθετε πώς να δημιουργήσετε ολοκληρωτικό φόντο βίντεο με CSS.

Πώς να δημιουργήσετε ολοκληρωμένο βίντεο

Βήμα 1 - Προσθήκη HTML:

<!-- Βίντεο -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- Προαιρετικό: Κάποιο κείμενο που καλύπτει το βίντεο -->
<div class="content">
  <h1>Όνομα</h1>
  <p>Lorem ipsum...</p>
  <!-- Χρησιμοποιήστε το κουμπί για να σταματήσετε/παίξετε το βίντεο μέσω JavaScript -->
  <button id="myBtn" onclick="myFunction()">Παύση</button>
</div>

Δεύτερο βήμα - Προσθέστε CSS:

/* Ορισμός των стилей για το βίντεο: 100% πλάτος και ύψος για να καλύπτει ολόκληρη τη στήλη */
#myVideo {
  θέση: fixed;
  δεξιά: 0;
  κάτω: 0;
  ελάχιστο πλάτος: 100%;
  ελάχιστη ύψος: 100%;
}
/* Προσθέστε περιεχόμενο στο κάτω μέρος του βίντεο/σελίδας */
.content {
  θέση: fixed;
  κάτω: 0;
  βαθμός: rgba(0, 0, 0, 0.5);
  χρώμα: #f1f1f1;
  πλάτος: 100%;
  παράθεση: 20px;
}
/* Ορισμός των стилей για το κουμπί pause/play βίντεο */
#myBtn {
  πλάτος: 200px;
  μεγεθύς γραμματοσειράς: 18px;
  παράθεση: 10px;
  περίγραμμα: none;
  βαθμός: #000;
  χρώμα: #fff;
  απόδειξη: pointer;
}
#myBtn:hover {
  βαθμός: #ddd;
  χρώμα: μαύρο;
}

Τρίτο βήμα - Προσθέστε JavaScript:

ή μπορείτε να προσθέσετε JavaScript, απλά κάντε κλικ στο κουμπί για να σταματήσετε/παίξετε το βίντεο:

παράδειγμα

<script>
// Λάβετε το βίντεο
var video = document.getElementById("myVideo");
// Λάβετε το κουμπί
var btn = document.getElementById("myBtn");
// Σταματίστε και παίξτε το βίντεο, και更改按钮文本
λειτουργία myFunction() {
  εάν (video.paused) {
    video.play();
    btn.innerHTML = "Παύση";
  } αλλιώς {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

Try it yourself