<style>
#papa {
	margin: 0 0 0 calc(50% - 831px);
	width: 1700px;
	height: 900px;
	background: url('https://pic.imgdb.cn/item/6559d3adc458853aefa1bc80.webp') no-repeat center/cover;
	box-shadow: 4px 4px 8px black;
	overflow: hidden;
	display: grid;
	place-items: center;
	z-index: 1;
	position: relative;
	--state: running;
}
#vid1 {
	position: absolute;
	width: 120%;
	height: 120%;
	top:-100px;
	left:-301px;
	object-fit: cover;
	pointer-events: none;
	mix-blend-mode: screen;
	z-index:3;
	opacity: .66;
}
#vid2 {
	position: absolute;
	width: 100%;
	height: 110%;
	top:-80px;
	object-fit: cover;
	pointer-events: none;
	mix-blend-mode: screen;
	z-index: 5;
	opacity: .19;
}
</style>

<div id="papa">
	<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67b21fa8e26.mp4" autoplay="" loop="" muted=""></video>
	<video id="vid2" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0a9c8e2cf.mp4" autoplay="" loop="" muted=""></video>
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2077221280" autoplay="" loop=""></audio>
</div>

<script>

(function() {
	let script = document.createElement('script');
	script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
	script.charset = 'utf-8';
	document.head.appendChild(script);
	let geci = [ 	
		[1.12,"单曲：明明",1.5],
		[2.58,"所属专辑：“海边岩下白山猹”",1.6],
		[4.2,"原唱：周深",1.6],
		[5.82,"翻唱：白浅熙/猹猹子",1.4],
		[7.26,"后期：陌九",1.1],
		[8.31,"学习黑师《变奏的梦想 - 酹江月》脚链频谱效果",5.5],
		[19,"念念不忘情未了 在耳鬓厮咬",5.9],
		[26.64,"回忆触了礁 无处停靠",5.5],
		[33.79,"两两相望 雨潇潇 谁化作云烟飘渺",6.1],
		[41.04,"留下心的孤岛 做无岸波涛",6.1],
		[50.1,"明明你知道 明明我明了",2.9],
		[53.44,"明明爱锁在眼底缠绕",3.1],
		[57.04,"为一个拥抱 用一生灼烧",3.4],
		[61.01,"在千帆过尽里寻找",2.5],
		[64.05,"明明你知道 明明我明了",3.7],
		[68.07,"明明愿生生誓死缠绕",3.1],
		[72.07,"为一刻心跳 用天荒凭吊",3.1],
		[76.03,"永不离散 我们早说好",4.2],
		[96,"念念不忘情未了 在耳鬓厮咬",5.5],
		[103,"回忆触了礁 无处停靠",5.8],
		[110.35,"爱恨纷扰忘不了 就算隔天地遥遥",6.1],
		[117.92,"灵魂相拥惊扰怎一笔勾销",5.7],
		[126.04,"明明你知道 明明我明了",3.5],
		[129.93,"明明爱锁在眼底缠绕",3.1],
		[133.04,"为一个拥抱 用一生灼烧",3.9],
		[137.62,"在千帆过尽里寻找",2.5],
		[141.03,"明明你知道 明明我明了",3.2],
		[144.68,"明明愿生生誓死缠绕",3.1],
		[148.45,"为一刻心跳 用天荒凭吊",3.2],
		[152.72,"永不离散 我们早说好",3.9],
		[174.07,"明明你知道 明明我明了",3.2],
		[177.75,"明明爱锁在心底缠绕",3.0],
		[181.06,"为一个拥抱 用一生灼烧",3.6],
		[185.22,"在无尽覆辙里重蹈",2.6],
		[188.98,"明明你知道 明明我明了",3.0],
		[192.44,"明明抹不掉魂牵梦绕",3.0],
		[196.08,"为一刻心跳 用天荒凭吊",3.6],
		[200.18,"留住你一眼 哪怕多一秒",6.5]
	];
	script.onload = () => {
		HCPlayer({
			papa: '#papa',
			lrcAr: geci,
			lrc_css: 'top: 830px; --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4)); color: Wheat;',
			fs_css: 'background: transparent; color: white; left:5%; bottom:5%;',
			player_css: `
				top: 380px;
				left:230px;
				border-width: 0;
				color: #fff;
				--size: 160px;
				--bRad: 30%;
				--track: gray;
				--prog: lightblue;
				--btnBg: linear-gradient(orange, snow);
			`,
			lizi: { color1: 'lightyellow', color2: 'silver' },
		});
	};
	[...new Array(5).keys()].forEach((e,k) => {
		e = document.createElement('span');
		e.className = 'meteor';
		e.style.cssText += `
			left: ${50 * Math.random()}%;
			top: ${10 * Math.random()}%;
			--du: ${3 + Math.random() * 2}s;
			--delay: -${Math.random() * 1}s;
			--ww: ${25 + Math.random() * 10}px;
		`;
		papa.appendChild(e);
	});
})();

papa.onclick = () => aud.paused ? (vid1.pause(),vid2.pause()) : (vid1.play(),vid2.play());

</script>

【注】lrc_css参数bottom不起作用，就用top，根据高度设计即可。