设置视频水平垂直居中显示在页面上
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
}
.index {
height: 100%;
position: relative;
width: 100%;
}
.contain {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="index">
<div class="contain">
<!-- muted 属性属于逻辑属性,当设置该属性后，它规定视频的音频输出应该被静音 -->
<video autoplay="autoplay" loop="loop" muted="muted">
<source src="./top_bg.mp4" type="video/mp4">;
</video>
</div>
</div>
</body>
<script>
</script>
</html>
