HTML-视频高度自适应解决方法_html背景视频自适应-CSDN博客

本文链接：https://blog.csdn.net/wang704987562/article/details/81586992

使用开源video.js
项目地址：https://github.com/videojs/video.js
代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
		<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
		<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
		
		<style>
			body {
				padding: 0;
				margin: 0;
			}
			div.videocontent {
				width:100%;
			}
			div.wrapper {
				max-width:750px; 
				margin: 0 auto;
			}
			
		</style>
	</head>

	<body>
		<div class="wrapper">
			<div class="videocontent">
				<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
					<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
				</video>
			</div>
		</div>
	</body>

</html>

核心是设置视频比例：vjs-16-9 或者 vjs-4-3
视频居中class：vjs-big-play-centered