วิธีการตั้งค่าพื้นหลังเว็บไซต์ให้เป็นวิดีโอแบบเบลอ

ฉันได้อ่านกระทู้ Stack Overflow อื่น ๆ เกี่ยวกับหัวข้อนี้แล้ว แต่ดูเหมือนจะไม่สามารถใช้งานได้

ฉันกำลังพยายามหาวิธีตั้งค่าวิดีโอเบลอเป็นพื้นหลัง เห็นสิ่งที่ฉันต้องการทำบนเว็บไซต์ Squarespace นี้: https://geoxor.me/

ยังไม่ได้ค้นหาโค้ดใดๆ สำหรับเอฟเฟกต์เบลอ เนื่องจากฉันยังอยู่ในกระบวนการพยายามทำให้ส่วนวิดีโอใช้งานได้

รหัสที่ฉันใช้:

html

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

ซีเอสเอส

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

ฉันขอขอบคุณคำแนะนำใด ๆ ขอบคุณสำหรับเวลาของคุณ!


html css background video
person Ashh    schedule 09.06.2020    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

คุณสามารถรวมองค์ประกอบวิดีโอไว้ในคอนเทนเนอร์เพื่อให้วิดีโออยู่ตรงกลาง และตั้งค่าความกว้างและความสูงให้เต็มหน้าจอได้ จากนั้นสำหรับวิดีโอ ให้เพิ่มตัวกรอง: blur() เพื่อเบลอพื้นหลัง โปรดทราบว่าการทำเช่นนี้จะทำให้ขอบเบลอเป็นสีขาว ดังนั้นคุณต้องปรับขนาดให้ใหญ่ขึ้นด้วยการแปลง: ปรับขนาดเพื่อซ่อนขอบ

#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
ขอบคุณ! มันทำงานได้อย่างสมบูรณ์แบบ เพียงแค่ต้องเพิ่มตำแหน่ง: ญาติ; องค์ประกอบ css ในเนื้อหาของฉันเพื่อแสดงทุกอย่างถูกต้อง - person Ashh; 10.06.2020
comment
ไม่มีปัญหา ฉันดีใจที่มันช่วยได้! (= - person Xenvi; 10.06.2020

arrow_upward

arrow_downward

person    schedule
comment
ขอบคุณมาก! ความคิดเห็นของคุณช่วยให้ฉันทราบว่าฉันต้องทำอะไรเพื่อแสดงเนื้อหาอย่างถูกต้อง! - person Ashh; 10.06.2020