时间戳

首页 > 解决方案 > 如何将网站背景设置为模糊的视频？

html - 如何将网站背景设置为模糊的视频？

问题描述

我一直在阅读有关此主题的其他 Stack Overflow 线程，但我似乎无法使其工作。

我试图弄清楚如何在循环中设置模糊视频作为背景。在这个 Squarespace 网站上看到了我想做什么：https ://geoxor.me/

还没有寻找任何模糊效果的代码，因为我仍在尝试使视频部分工作。

我正在使用的代码：

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%;
}

我将不胜感激任何建议，感谢您的宝贵时间！

标签： htmlcssvideobackground

解决方案

您可以将视频元素包装在容器中以使视频居中并将宽度和高度设置为填满屏幕。然后对于视频，添加 filter: blur() 来模糊背景。请记住，这会使边缘模糊为白色，因此您必须使用 transform: scale 将其放大以隐藏边缘。

#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>

推荐阅读