与图像类似，视频也可以实现响应式，这样视频应扩展以填充整个内容区域，同时保持其原始宽高比。

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

CSS RWD视频 - 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="/css/foo.mp4" type="video/mp4">
   </video>
</body>
</html>

CSS RWD 视频 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="/css/foo.mp4" type="video/mp4">
   </video>
</body>
</html>

CSS RWD 视频 在网格内

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

<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="/css/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>