简介
为哪吒面板增加视频背景,主打的就是一个为了好看。
代码
话不多说,直接上代码
css样式
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脚本
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橱窗脚本食用,效果更佳