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 分钟前
spring中的@RabbitListener注解详解
java·后端·spring·rabbitlistener
李斯维3 分钟前
循序渐进 Android Binder(二):传递自定义对象和 AIDL 回调
android·java·android studio
androidwork5 分钟前
OkHttp 3.0源码解析:从设计理念到核心实现
android·java·okhttp·kotlin
程序员岳焱6 分钟前
Java 程序员成长记(二):菜鸟入职之 MyBatis XML「陷阱」
java·后端·程序员
我命由我123458 分钟前
Spring Boot 项目集成 Redis 问题:RedisTemplate 多余空格问题
java·开发语言·spring boot·redis·后端·java-ee·intellij-idea
用户882093216678 分钟前
Vue组件通信全攻略:从父子传参到全局状态管理,一篇搞定!
前端
面朝大海,春不暖,花不开8 分钟前
Spring Boot消息系统开发指南
java·spring boot·后端
程序员岳焱10 分钟前
Java 程序员成长记(三):菜鸟入职之@Transactional「罢工」
java·后端·编程语言
Canmick12 分钟前
JavaScript 异步函数健身操
前端·javascript
一曝十寒13 分钟前
那些常见的 HTTP 状态码
前端·http