Css 简明教程

CSS RWD Videos

类似于图片，视频也可以创建响应性，使得视频可以扩展以填充整个内容区域，同时保持其原始宽高比。

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.

如果指定视频的固定宽度或高度，可能会导致布局问题，例如破坏页面布局、扭曲图片或在视频周围显示黑条。视频周围的黑条被称为 letterboxing （视频顶部和底部）、 pillarboxing （视频左右两侧）和 windowboxing （视频所有侧面）。

When a fixed width or height of a video is specified, it may cause layout issue, such as breaking page layouts, distorting the image, or displaying black bars around the video. The black bars around the video are called letterboxing (on top and bottom of the video), pillarboxing (on left and right of the video), and windowboxing (on all sides of the video).

CSS RWD Videos - width Property

为了使视频响应和流畅，视频的 * width* 属性被设置为 percentage 值，同时 * height* 属性被设置为 auto 。

To make a video responsive and fluid, the width property of the video is set to a percentage value, along with height property set to 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 RWD Videos - max-width Property

为了使视频响应和流畅，视频的 * max-width* 属性被设置为 100% ，它允许视频按设置程度缩小，但绝不会将其放大到超过其原始大小。

To make a video responsive and fluid, the max-width property of the video is set to a 100%, which will let the video get scaled down to the extent it is set, but will never scale up more than its original size.

<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 RWD Videos - Within a grid

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

The following example demonstrates the use of a responsive video within a grid column. Based on the max-width value of the video, the video gets scaled down as per the screen size.

<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>