So fügen Sie einem Heldenabschnitt in Bootstrap ein Hintergrundvideo hinzu

Verwenden Sie das HTML5

Das Hinzufügen eines Hintergrundvideos zu einem Heldenbereich in Bootstrap ist eine großartige Möglichkeit, Ihre Zielseite engagierter zu gestalten. Während Bootstrap nicht integrierte Unterstützung für Video-Hintergründe enthält, können Sie dies einfach mit HTML5-Video und ein wenig benutzerdefinierten CSS erreichen. Hier erfahren Sie, wie man es richtig macht.

1. Richten Sie den Heldenabschnitt mit einem Video -Hintergrund ein

Verwenden Sie das HTML5 <video></video> -Element in Ihrem Heldenabschnitt. Dies gibt Ihnen die volle Kontrolle über das Video und stellt sicher, dass es automatisch (gedämpft) und Schleifen abgespielt wird.

 <Abschnitt class = "Hero-Abschnitt D-Flex Align-Item-Center-Justiz-in-in-Center-Text-Weiß-Text-Center">
  <Video-Autoplay-Stummschöpfen-Schleife ID = "Hero-Video">
    <source src = "your-video.mp4" Typ = "Video/mp4">
    Ihr Browser unterstützt das Video -Tag nicht.
  </Video>

  <div class = "container">
    <h1> Willkommen auf unserer Website </h1>
    <p class = "lader"> Dies ist ein Heldenabschnitt mit einem Hintergrundvideo. </p>
    <a href = "#" class = "btn btn-primary btn-lg"> Start </a>
  </div>
</Abschnitt>

2. Fügen Sie CSS hinzu, um den Videohintergrund zu stylen

Der Schlüssel ist, das Video den gesamten Heldenabschnitt zu füllen und hinter dem Inhalt zu sitzen. Verwenden Sie die absolute Positionierung und Z-Index, um das Video korrekt zu löschen.

 .hero-Abschnitt {
  Position: Relativ;
  Höhe: 100VH;
  Überlauf: versteckt;
  Farbe: weiß;
}

#Hero-video {
  Position: absolut;
  Top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
  Objekt-Fit: Deckung; / * Stellt sicher, dass das Video den Bereich ohne Verzerrung abdeckt */
  Z -Index: -1; / * Sendet das Video nach hinten */
}

.HERO-Sektion :: nach {
  Inhalt: '';
  Position: absolut;
  Top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
  Hintergrund: RGBA (0, 0, 0, 0,5); / * Optional: Fügt eine dunkle Überlagerung für eine bessere Textlesbarkeit hinzu *////////////
  Z -Index: -1;
}

3.. Schlüsseltipps für die besten Ergebnisse

• Verwenden Sie object-fit: cover -Dadurch können Sie den gesamten Container ohne Dehnen abdecken.
• Autoplay erfordert gedämpfte Browser blockieren Autoplay für Videos mit Ton. Fügen Sie immer muted damit Autoplay funktioniert.
• Optimieren Sie die Videogröße - Große Videodateien können Ihre Website verlangsamen. Verwenden Sie komprimierte Versionen (z. B. 720p oder 1080p) und überlegen Sie, ob .webm für eine bessere Komprimierung verwendet wird.
• FALLBACKS Geben -Erwägen Sie, ein Hintergrundbild für mobile Geräte zu verwenden, auf denen Videos deaktiviert oder zu datenhaspend sind.

Verstecken Sie beispielsweise das Video auf kleinen Bildschirmen und verwenden Sie ein statisches Bild:

 @media (max-Width: 768px) {
  #Hero-video {
    Anzeige: Keine;
  }
  .hero-Abschnitt {
    Hintergrundbild: URL ('Fallback-Hero.jpg');
    Hintergrundgröße: Cover;
    Hintergrundposition: Zentrum;
  }
}

V.

Wenn Sie die Benutzersteuerung möchten, können Sie Steuerelemente hinzufügen, aber für Hintergrundvideos ist es normalerweise besser, sie einfach und nur automatisch zu halten.

 <Video-Autoplay-Stummschleibensteuerung> <!-Vermeiden Sie &#39;Steuerelemente&#39; für Hintergrundvideos->

Aber für einen sauberen Heldenabschnitt lassen Sie die Steuerelemente aus.

Das war's. Mit nur wenigen Zeilen HTML und CSS haben Sie ein umfassendes Hintergrundvideo in Ihrem Bootstrap Hero-Bereich. Halten Sie das Video kurz, optimiert und visuell mit Ihrer Marke überein. Der Rest Ihrer Bootstrap -Komponenten (Tasten, Typografie, Gitter) funktioniert oben gut.

Das obige ist der detaillierte Inhalt vonSo fügen Sie einem Heldenabschnitt in Bootstrap ein Hintergrundvideo hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!