Bagaimana cara mengatur latar belakang situs web sebagai video dengan blur?

Saya telah membaca thread Stack Overflow lainnya tentang topik ini, tapi sepertinya saya tidak bisa membuatnya berhasil.

Saya mencoba mencari cara untuk mengatur video buram secara berulang sebagai latar belakang. Lihat apa yang ingin saya lakukan di situs Squarespace ini: https://geoxor.me/

Belum mencari kode apa pun untuk efek blur, karena saya masih dalam proses mencoba membuat bagian video berfungsi.

Kode yang saya gunakan:

html

<video id="videoBackground" autoplay muted loop>
  <source src="https://player.vimeo.com/video/144855113">
</video>

css

#videoBackground {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width:  100%;
  min-height: 100%;
}

Saya menghargai saran apa pun, terima kasih atas waktu Anda!


html css background video
person Ashh    schedule 09.06.2020    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Anda dapat membungkus elemen video dalam wadah untuk memusatkan video dan mengatur lebar dan tinggi untuk memenuhi layar. Kemudian untuk videonya, tambahkan filter: blur() untuk memburamkan latar belakang. Perlu diingat ini membuat tepinya menjadi putih kabur sehingga Anda harus memperbesarnya dengan transform: skala untuk menyembunyikan tepinya.

#videoBackground {
    width: inherit;
    height: inherit;
    -webkit-filter: blur(15px);
    -o-filter: blur(5px);
    filter: blur(5px);
    object-fit: cover;
    transform: scale(1.06); /* Hide edge blur */
}
#container {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
<div id="container">
  <video id="videoBackground" autoplay muted loop>
    <source src="https://vod-progressive.akamaized.net/exp=1591758868~acl=%2A%2F1646772055.mp4%2A~hmac=ca002f29c4796df2b022404219ed50625d2baf4043cb622ce78dcb05f8c9edbb/vimeo-prod-skyfire-std-us/01/2944/15/389724705/1646772055.mp4">
  </video>
</div>

person Xenvi    schedule 09.06.2020
comment
Terima kasih! Ini berfungsi dengan baik, hanya perlu menambahkan position: relative; elemen css ke konten saya untuk menampilkan semuanya dengan benar. - person Ashh; 10.06.2020
comment
Tidak masalah, saya senang ini membantu! (= - person Xenvi; 10.06.2020

arrow_upward

arrow_downward

person    schedule
comment
Terima kasih banyak! Komentar Anda membantu saya mengetahui apa yang sebenarnya harus saya lakukan untuk menampilkan konten saya dengan benar! - person Ashh; 10.06.2020