Cara Menambah Video Latar Belakang ke Bahagian Hero di Bootstrap

Gunakan tag HTML5 untuk menambah video ke kawasan wira bootstrap, tetapkan atribut autoplay, disenyapkan dan gelung untuk mencapai main balik gelung automatik; 2. Gunakan CSS untuk meletakkan video dan meletakkannya di lapisan bawah (z-indeks: -1), gunakan objek yang sesuai: tutup untuk memastikan bahawa video meliputi seluruh kawasan tanpa ubah bentuk, dan tambahkan elemen pseudo untuk menanam lapisan separa telus untuk meningkatkan kebolehbacaan teks; 3. Mengoptimumkan saiz fail video, disyorkan untuk menggunakan format 720p atau 1080p .mp4 atau .webm, dan menyembunyikan video melalui pertanyaan media pada terminal mudah alih dan menggunakan imej latar belakang sebagai penyelesaian sandaran; 4. Ia tidak disyorkan untuk menambah atribut kawalan untuk video latar belakang untuk memastikan antara muka ringkas; Akhirnya, digabungkan dengan kelas susun atur Bootstrap untuk mencapai reka bentuk yang berpusat dan responsif, untuk melengkapkan kawasan hero video latar belakang skrin penuh yang menarik secara visual dan mempunyai prestasi yang baik.

Menambah video latar belakang ke bahagian wira di Bootstrap adalah cara terbaik untuk menjadikan halaman pendaratan anda lebih menarik. Walaupun Bootstrap tidak termasuk sokongan terbina dalam untuk latar belakang video, anda boleh mencapai ini dengan mudah menggunakan video HTML5 dan sedikit CSS tersuai. Inilah cara melakukannya dengan betul.

1. Sediakan bahagian wira dengan latar belakang video

Gunakan elemen HTML5 <video></video> di dalam bahagian Hero anda. Ini memberi anda kawalan penuh ke atas video dan memastikan ia bermain secara automatik (diredam) dan gelung.

 <Section Class = "Hero-Section D-Flex Align-Items-Center Justify-Content-Center-Center-White Text-Center">
  <video autoplay muted loop id = "hero-video">
    <source src = "your-video.mp4" type = "Video/mp4">
    Penyemak imbas anda tidak menyokong tag video.
  </video>

  <div class = "container">
    <h1> Selamat datang ke laman web kami </h1>
    <p class = "lead"> Ini adalah bahagian wira dengan video latar belakang. </P>
    <a href = "#" class = "btn btn-primary btn-lg"> bermula </a>
  </div>
</seksyen>

2. Tambahkan CSS untuk gaya latar belakang video

Kuncinya adalah untuk membuat video mengisi seluruh bahagian wira dan duduk di belakang kandungan. Gunakan kedudukan mutlak dan z-indeks untuk lapisan video dengan betul.

 .hero-seksyen {
  Kedudukan: Relatif;
  Ketinggian: 100VH;
  Limpahan: Tersembunyi;
  Warna: Putih;
}

#Hero-Video {
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  Objek-Fit: Cover; / * Memastikan video meliputi kawasan tanpa herotan */
  Z -indeks: -1; / * Menghantar video ke belakang */
}

.hero-seksyen :: selepas {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  Latar Belakang: RGBA (0, 0, 0, 0.5); / * Pilihan: Menambah Overlay Gelap untuk kebolehbacaan teks yang lebih baik */
  Z -indeks: -1;
}

3. Petua utama untuk hasil terbaik

• Gunakan object-fit: cover -Ini menjadikan skala video untuk menutup seluruh bekas tanpa regangan.
• Autoplay memerlukan disenyapkan - penyemak imbas blok autoplay untuk video dengan bunyi. Sentiasa termasuk muted untuk autoplay untuk bekerja.
• Mengoptimumkan Saiz Video - Fail video besar boleh melambatkan laman web anda. Gunakan versi termampat (misalnya, 720p atau 1080p) dan pertimbangkan untuk menggunakan .webm untuk pemampatan yang lebih baik.
• Menyediakan penandaan -Pertimbangkan menggunakan imej latar belakang untuk peranti mudah alih di mana video mungkin dilumpuhkan atau terlalu berat data.

Sebagai contoh, sembunyikan video pada skrin kecil dan gunakan imej statik:

 @media (max-width: 768px) {
  #Hero-Video {
    Paparan: Tiada;
  }
  .hero-seksyen {
    Latar Belakang-imej: URL ('fallback-hero.jpg');
    Latar Belakang: Cover;
    Latar Belakang: Pusat;
  }
}

4. Pilihan: Tambahkan kawalan atau butang jeda (tidak disyorkan untuk latar belakang)

Jika anda mahu kawalan pengguna, anda boleh menambah kawalan, tetapi untuk video latar belakang, biasanya lebih baik untuk memastikan ia mudah dan autoplay sahaja.

 <Video Autoplay Muted Loop Controls> <!-Elakkan &#39;Kawalan&#39; untuk video latar->

Tetapi sekali lagi, untuk seksyen wira yang bersih, tinggalkan kawalan.

Itu sahaja. Dengan hanya beberapa baris HTML dan CSS, anda mempunyai video latar belakang skrin penuh di bahagian Hero Bootstrap anda. Pastikan video pendek, dioptimumkan, dan sejajar dengan jenama anda. Selebihnya komponen bootstrap anda (butang, tipografi, grid) akan berfungsi dengan baik di atas.

Atas ialah kandungan terperinci Cara Menambah Video Latar Belakang ke Bahagian Hero di Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!