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>

相关推荐
步行cgn13 分钟前
为何以继承方式引入SpringBoot
java·spring boot·后端
CoderYanger14 分钟前
A.每日一题:1140. 石子游戏 II
java·程序人生·算法·leetcode·游戏·职场和发展·深度优先
禾高网络16 分钟前
养老系统开发:背景、架构与养老行业展望
java·大数据·人工智能·小程序·架构
coderCN17 分钟前
Nodejs path OS process child_process FS crypto zlib ffmpeg Markdown 转 html
前端
七牛开发者20 分钟前
拆解 dsh:Session 的事件溯源与状态重建
javascript·github·agent
梨想橙汁24 分钟前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript
梨想橙汁30 分钟前
ES6+ 必用新特性:箭头函数、解构、模板字符串、扩展运算符
前端·javascript
梨想橙汁31 分钟前
DOM 与 JS 事件:页面元素操作、事件冒泡、事件委托实战
前端·javascript
Dreams°1231 小时前
【React+TS+ECharts可视化避坑:图表空白、不实时更新、数据池堆积卡顿完整复盘(附完整源码)】
前端·react.js·echarts
CCYe、1 小时前
新模型上线、旧模型下线:企业AI网关如何管住模型版本
java·网络·数据库·人工智能