本文最后更新于 43 天前，其中的信息可能有所发生改变
前言
一个好的博客页面能使人印象深刻，视频背景较为美观，下面用十几行简单的代码就实现日/夜间模式不同视频背景。
但是，一切美化只是为好的文章做铺垫。
开始操作
获取直链
开始前需要获得两段视频直链。
可以使用WordPress自带的媒体库上传视频获得直链（部署视频背景可能会拖慢低性能的主机，造成访问速度减慢）。
也可以使用无防盗链的视频平台上传视频使用审查元素获得直链（e.g.百度贴吧）。
或者对视频切片上传到图床中。（后文有参考文章）
引入
首先使用Video标签引入定义日/夜间模式需要展现的两段视频。
使用
autoplay自动播放
loop循环播放
muted静音
<video
src=""//此处填浅色模式视频链接
class="bg-video bg-video-day"
autoplay=""
loop="loop"
muted=""
></video>
<video
src=""//此处填夜间模式视频链接
class="bg-video bg-video-night"
autoplay=""
loop="loop"
muted=""
></video>裁剪定义
引入视频后再对视频进行裁剪及关联日/夜间模式
可视情况对
高度height,宽度width
进行修改
<style>
video.bg-video {
position: fixed;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
pointer-events: none;
}
html.darkmode video.bg-video.bg-video-day {
opacity: 0;
}
html.darkmode video.bg-video.bg-video-night {
opacity: 1;
}
video.bg-video.bg-video-day {
opacity: 1;
}
video.bg-video.bg-video-night {
opacity: 0;
}
#banner,
#banner .shape {
background: transparent !important;
}
</style>已知问题:移动端某些特殊内核浏览器（e.g.微信内置浏览器）会无法自动播放视频导致视频背景错误
参考
本文代码涉及以下博客文章，十分感谢大佬的分享。