CSS 响应式网页设计中的视频

在响应式网页设计中，确保视频能够正确适应布局非常重要。视频应该扩展以填充整个内容区域，同时保持其原始纵横比。

当指定视频的固定宽度或高度时，可能会在非常大或非常小的屏幕上导致布局问题，例如破坏页面布局、扭曲形状或在视频周围显示黑条。视频周围的黑条称为信箱式（在视频的顶部和底部）、柱箱式（在视频的左侧和右侧）以及窗口式（在视频的四周）。

因此，使用相对单位（如百分比）而不是绝对值（如像素）来设置宽度和高度属性非常重要。绝对值会限制视频的响应性。

使用 width 属性实现响应式视频

为了使视频根据屏幕尺寸进行缩放，我们需要将视频的宽度属性设置为 100%，并将高度设置为 auto。

video {
    width: 100%;
    height: auto;
}

通过这种方式设置样式，使视频占据其父元素的 100% 宽度，并且高度将被调整以保持视频的纵横比。此设置允许视频随屏幕尺寸缩放。但是，在非常大的屏幕上，视频可能会超出其自然宽度，使其看起来变形。

示例

在此示例中，显示的视频将根据输出窗口的屏幕尺寸进行缩放。在 Tutorialspoint 的HTML 编译器中运行此代码以调整输出窗口宽度并进行验证。

<!DOCTYPE html>
<html>

<head>
    <style>
        video {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <p>
        The video will cover 100% width
    </p>
    <video width="400" controls>
        <source src="/css/foo.mp4" type="video/mp4">
   </video>
</body>

</html>

使用 max-width 属性实现响应式视频

上述方法有一个缺点，在大型屏幕上，视频会超出其自然尺寸进行拉伸。为了防止这种情况，我们可以使用max-width属性代替 'width' 属性。

video {
    max-width: 100%;
    height: auto;
}

通过这种方式设置视频属性，如果需要，视频将缩小，但永远不会放大到超过其原始尺寸。

示例

在此示例中，显示的视频将根据输出窗口的屏幕尺寸进行缩放，但永远不会缩放超过其自然尺寸。在 Tutorialspoint 的HTML 编译器中运行此代码以调整输出窗口宽度并进行验证。

<!DOCTYPE html>
<html>

<head>
    <style>
        video {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <p>
        The video will cover 100% width if natural width is less than
        output screen width
    </p>
    <video width="400" controls>
        <source src="/css/foo.mp4" type="video/mp4">
    </video>
</body>

</html>

向示例网页添加视频

以下示例演示了如何在网页中使用响应式视频。根据视频的 max-width 值，视频将根据屏幕尺寸进行缩小。

示例

<!DOCTYPE html>
<html>

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

打印页面