为哪吒面板增加视频背景

简介

为哪吒面板增加视频背景，主打的就是一个为了好看。

代码

话不多说，直接上代码

css样式

<style>
/* 视频背景 */
.video-box {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: url(https://image.bmqy.net/upload/part-login@2x.jpg) 0 0 no-repeat;
    background-size: cover;
    overflow: hidden;
}
.video-box .video {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
</style>

JavaScript脚本

<script>
window.onload = function(){
	const $videoBox = document.createElement('div');
	$videoBox.setAttribute('class', 'video-box');
	$videoBox.innerHTML ='<video id="video" class="video" muted autoplay loop src="https://image.bmqy.net/upload/top.mp4"></video>';
	document.body.append($videoBox);
	let videoPlayPromise = document.querySelector('video').play();
	if (videoPlayPromise !== undefined) {
	  videoPlayPromise.then(_ => {
	    // Autoplay started!
	  }).catch(error => {
	    // Autoplay was prevented.
	    // Show a "Play" button so that user can start playback.
	  });
	}
}
</script>

效果

查看效果，请直接访问我的探针

避免玄学，贴个GIF图

其它

• 视频链接和相关图片，可自行替换
• video标签不能使用js代码动态生成
• 配合哪吒面板VPS橱窗脚本食用，效果更佳