The content of this article is to introduce how to add a video poster to the header of the website? How to add a video poster (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Code to add a video poster to the website header:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频海报</title>
<style>
*{
margin: 0;
padding: 0;
}
#banner{
width: 100%;
height: 500px;
background: purple;
overflow: hidden;
position: relative;
}
#banner video{
width: 100%;
position: relative;
opacity: 0.6; /* 设置透明度 */
}
#banner h2,h4{
position: absolute;
top: 120px;
left: 150px;
width: 100%;
text-align: left;
color: #fff;
line-height: 30px;
}
#banner h2{
top: 80px;
font-size: 40px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="banner">
<video loop autoplay> <!-- loop循环播放，autoplay自动播放 -->
<source src="video/banner.mp4">
</video>
<h2>SLOW DOWN</h2>
<h4>静下来<br> 携一缕清风，续一杯清茶 <br> 且听风轻云淡</h4>
</div>
</body>
</html>Result
The above is the detailed content of How to add a video poster to the header of the website? How to add a video poster (code example). For more information, please follow other related articles on the PHP Chinese website!
What are the production methods of html5 animation production?
The difference between HTML and HTML5
Introduction to architectural drawing software
Reasons why excel table cannot be opened
how to hide ip address
How to skip online activation in win11
What are the java flow control statements?
What are the javabean attributes?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
