为哪吒面板增加视频背景

24 年 6 月 18 日 星期二 (已编辑)
208 字
2 分钟

简介

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

代码

话不多说,直接上代码

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图

CPT2406191013-1920x358.gif

其它

  • 视频链接相关图片,可自行替换
  • video标签不能使用js代码动态生成
  • 配合哪吒面板VPS橱窗脚本食用,效果更佳
欢迎关注我的其它发布渠道
公众号小程序

文章标题:为哪吒面板增加视频背景

文章作者:bmqy

文章链接:https://www.bmqy.net/2671.html[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。