DIV嵌入视频做背景,上面加文字

<embed src="assets/images/shipin.mp4" width="100%" height="400px"></embed>

<div class="bad-video">

<video class="" style="object-fit: fill" width="100%" height="100%" webkit-playsinline style="object-fit:fill;" autoplay loop muted>

<source src='assets/images/shipin.mp4' type="video/mp4"></source>

<p>设备不支持</p>

<video>

</div>

<div class="video-font">

<h1>开放 协作 创新</h1>

<p>------ 清湛人工智能及工业视觉开放场景实验室 ------</p>

</div>

<style>

.bad-video {

position: relative;

overflow: hidden;

background-color: #CCCCCC;

height: 426px;

margin-top: 93px;

}

.bad-video .vplay{

position: absolute;

width: 15%;

z-index: 99;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.video-font{

z-index: 98;

position: absolute;

font-size: 45px;

margin-top: 93px;

top: 80px;

text-align: center;

width: 100%;

}

.video-font h1{

color: #fff;

width: 100%;

letter-spacing: 3px;

}

.video-font p{

color: rgb(255 255 255 / 60%);

font-size: 26px;

letter-spacing: 3px;

font-weight: 300;

padding-top: 15px;

}

</style>

相关推荐
Molecular_Chat3 小时前
Biotin SNA 生物素偶联凝集素结合特异性、生物素标记效率定量表征研究
javascript·python
WILLF3 小时前
Python vs JavaScript 异常处理对比
前端·python
__sjfzllv___3 小时前
在职前端Leader学习/转行 AI Agent -DAY31
前端
岁月留痕1683 小时前
4 Dart 篇:异步(并发)
前端
MartinYeung53 小时前
[论文学习]AdInject:通过广告投放对Web代理发起真实世界黑盒攻击
前端·学习
进击的蛋蛋3 小时前
JS对象的遍历
javascript·面试
用户2181697049303 小时前
Flutter (十六) 组件通信
前端
mONESY3 小时前
React 前端如何不傻等后端接口?
前端·javascript·后端
xiaominlaopodaren3 小时前
three.js地图数学基础(七):地图相机
javascript·gis·three.js
岁月留痕1683 小时前
6 Flutter 篇:Flutter 分层式架构设计
前端