时间戳

首页 > 解决方案 > 如何使视频随窗口大小收缩和拉伸？

html - 如何使视频随窗口大小收缩和拉伸？

问题描述

我有一个两列的行，我希望其中一行（包含一些文本）使其高度和大小与窗口大小无关，而另一行（包含视频）随着窗口大小收缩和拉伸。

我是 CSS 的初学者，无法通过阅读此处的相关答案来更好地了解如何做到这一点。

这是HTML。我没有为视频设置高度或宽度，因为我希望它是可变的，并且在视频的最小宽度之后整个页面溢出。

<!-- Originally tried with bootstrap grid, but that didn't work, that's why the class names -->
<div class="row upper-row">
  <div class="text-column">
    <!-- some paragraphs -->
  </div>
  <div class="video-column">
    <div class="video">
      <video controls>
        <source src="<some source>" type="video/mp4">
      </video>
    </div>
  </div>
</div>

尝试CSS：

视频的样式几乎是空的，因为在尝试了这么多东西之后，没有任何效果，而且太多了，无法在此处列出。我读到了fit-content, object-fit，尝试使用flexbox，但无法完成这项工作。

.text-column {
  width: 500px;
}

.video-column {
  min-width: 500px;
}

更新

在看到到目前为止发布的三个答案之前，我已经开始尝试使用 Bootstrap 的自动布局列，它似乎有效。我唯一无法解决的是，视频到达后min-width，页面没有溢出；相反，视频被包装到第二行，一切都变得一团糟。

我已经从提供的答案中阅读了一些有关方法的信息，我将签出到以前的提交来尝试它们。目前，这就是我所做的。我添加了一些东西，但主要内容是相同的。

HTML：

<div class="container">
    <div class="row upper-row">
        <div class="col-lg-auto text-column">
        <!-- some paragraphs -->
        </div>
        <div class="col video-column">
            <div class="player-container">
                <div class="video">
                    <video controls>
                        <source src="<some source>" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：


.player-container {
    /*This width seems to control the actual video size. If I use 100%, it allows the video to get too big and overflow the screen.*/
    width: 90%;
    /*This is the height that seemed most appropriate for this div to actually contain the video height*/
    height: 100%;
    /*I use this position because I am overlaying some things on the video*/
    position: relative;
    top: 5%;
    left: 4%;
}

.video {
    /*This is to do the overlap*/
    position: absolute;
    top: 0%;
    left: 0%;
}

video {
    min-width: 10%;
    max-width: 100%;
    min-height: 10%;
    max-height: 100%;
}

min-width有了这个，文本列保持相同的宽度，视频列成功地随着窗口缩小，但是，正如我所说，在达到之后它不会溢出。

标签： htmlcss

解决方案

您可以通过media queries 在 css 中使用或提供所需的容器来实现这一点，width and height auto它也会使其响应

推荐阅读