CSS - 响应式视频_CSS 菜鸟教程

与图像一样，视频也可以具有响应性，因此视频应该扩展以填充整个内容区域，同时保持其原始纵横比。

当指定了视频的固定宽度或高度时，可能会导致布局问题，例如破坏页面布局、扭曲图像或在视频周围显示黑条。视频周围的黑条称为黑边（在视频的顶部和底部）、柱框（在视频的左侧和右侧）和窗口框（在视频的所有侧面）。

CSS 响应式视频 - width 属性

为了使视频具有响应性和流畅性，视频的 width 属性设置为百分比值，并将 height 属性设置为 auto。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	video {
	 	 	 width: 100%;
	 	 	 height: auto;
	 	}
</style>
</head>
<body>
	 	<p>Resize the browser window to see how the size of the video player will scale.</p>
	 	<video width="400" controls>
	 	 	 <source src="foo.mp4" type="video/mp4">
	 	</video>
</body>
</html>

CSS 响应式视频 - max-width 属性

为了使视频具有响应性和流畅性，视频的 max-width 属性设置为 100%，这将使视频缩小到其设置的程度，但永远不会放大超过其原始大小。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	video {
	 	 	 max-width: 100%;
	 	 	 height: auto;
	 	}
</style>
</head>
<body>
	 	<p>Resize the browser window to see how the size of the video player will scale.</p>
	 	<video width="400" controls>
	 	 	 <source src="foo.mp4" type="video/mp4">
	 	</video>
</body>
</html>

CSS 响应式视频 - 在网格内

以下示例演示了如何在网格列中使用响应式视频。根据视频的最大宽度值，视频会根据屏幕大小缩小。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	* {
	 	 	 box-sizing: border-box;
	 	}

	 	.title {
	 	 	 border: 2px solid black;
	 	 	 padding: 10px;
	 	 	 background-color: blanchedalmond;
	 	}

	 	.grid-one {
	 	 	 width: 60%;
	 	 	 float: left;
	 	 	 padding: 10px;
	 	 	 border: 2px solid black;
	 	 	 background-color: darkseagreen;
	 	}

	 	.grid-two {
	 	 	 width: 40%;
	 	 	 float: left;
	 	 	 padding: 15px;
	 	 	 border: 2px solid black;
	 	 	 background-color: lightgreen;
	 	}

	 	ul {
	 	 	 list-style-type: none;
	 	}

	 	li {
	 	 	 background-color: aqua;
	 	 	 padding: 5px;
	 	 	 border: 1px solid black;
	 	 	 margin: 5px;
	 	}

	 	video {
	 	 	 max-width: 100%;
	 	 	 height: auto;
	 	}
</style>
</head>
<body>
	 	<div class="title">
	 	<h1>Responsive Web Design</h1>
	 	</div>

	 	<div class="grid-two">
	 	<ul>
	 	 	 <li>Viewport</li>
	 	 	 <li>Grid view</li>
	 	 	 <li>Media queries</li>
	 	 	 <li>Images</li>
	 	 	 <li>Videos</li>
	 	 	 <li>Frameworks</li>
	 	</ul>
	 	</div>

	 	<div class="grid-one">
	 	<h1>Responsive Videos</h1>
	 	<p>Alike images, videos can be made responsive too, such that the video should expand to fill the entire content area, while maintaining its original aspect ratio.</p>
	 	<video width="400" controls>
	 	 	 <source src="foo.mp4" type="video/mp4">
	 	</video>
	 	<p>Resize the browser window to see how the content gets responsive to the resizing.</p>
	 	</div>
</body>
</html>

<< CSS - 响应式图像 CSS - 响应式框架 >>