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>

相关推荐
韩立学长1 分钟前
【开题答辩实录分享】以《智慧物业管理系统的设计与实现》为例进行答辩实录分享
java·后端·mysql
10km5 分钟前
java:json-path支持fastjson作为JSON解析提供者的技术实现
java·json·fastjson·json-path
小张程序人生8 分钟前
深入理解SpringSecurity从入门到实战
java
G***E31614 分钟前
前端在移动端中的React Native Web
前端·react native·react.js
云烟飘渺o22 分钟前
JPA 的脏检查:一次“没 save() 却更新了”的排查记录
前端
d***956224 分钟前
springboot接入deepseek深度求索 java
java·spring boot·后端
Neptune127 分钟前
深入浅出:理解js的‘万物皆对象’与原型链
前端·javascript
阿迷不想上班27 分钟前
windows自动任务定期执行
javascript
王霸天30 分钟前
扒一扒 Vue3 大屏适配插件 vfit 的源码:原来这么简单?
前端
王霸天37 分钟前
拒绝 rem 计算!Vue3 大屏适配,我是这样做的 (vfit 使用体验)
前端