HTML中 video标签样式铺满全屏
warning:
这篇文章距离上次修改已过449天，其中的内容可能已经有所变动。
要使HTML中的<video>标签样式铺满全屏，可以使用CSS样式。以下是实现该效果的示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Fullscreen</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
video {
width: 100%;
height: 100%;
object-fit: cover; /* 确保视频内容覆盖整个视频元素 */
}
</style>
</head>
<body>
<video controls autoplay muted loop>
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>在这个例子中，<video>元素被赋予了width: 100%;和height: 100%;样式，使其铺满整个屏幕。object-fit: cover;样式确保视频内容能够覆盖整个视频元素，同时保持视频的宽高比。这样，当用户打开页面时，视频就会自动播放并铺满整个屏幕。
评论已关闭