2023年2月6日 17:56:21go评论51阅读模式

英文:

CSS video not stretching to 100% width of parent container

问题

&lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;

&lt;!-- 语言: lang-css --&gt;

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .top-rated-container-1 {
      width: 100%;
      margin: 0 auto;
    }
    .video-container {
      width: 100%;
      border: 1px solid black;
    }
    .video-container video {
      width: 100%;
      height: 250px;
    }

&lt;!-- 语言: lang-html --&gt;

    &lt;section class=&quot;top-rated-container-1&quot;&gt;
            &lt;div class=&quot;video-container&quot;&gt;
                &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;
                    poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                    &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                        type=&quot;video/webm&quot;&gt;
                    &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                        type=&quot;video/mp4&quot;&gt;
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/section&gt;

&lt;!-- 结束代码片段 --&gt;

在我的HTML代码中有一个视频元素，我已经在CSS中指定了宽度为100%。然而，视频没有占满其容器的整个宽度，我无法弄清楚原因。我已经尝试覆盖冲突的样式和检查父容器的宽度，但问题仍然存在。我正在寻找一种解决方案，使视频元素占满其容器的100%宽度。

我已经尝试在CSS中将视频元素的宽度指定为100%，还尝试使用像素设置宽度的绝对值。我期望视频占满其容器的整个宽度，但它没有。视频元素没有拉伸以填满容器的宽度，我不确定是什么原因引起了这个问题。

我还尝试将视频元素的高度设置为“auto”，但它仍然占据整个屏幕的高度。我希望高度保持不变，但宽度占满100%，就像下面的图片一样。

输出应该看起来像这样。
[![在此输入图像描述][1]][1]


  [1]: https://i.stack.imgur.com/BrJy3.jpg

英文:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
}
.video-container video {
  width: 100%;
  height: 250px;
}

&lt;section class=&quot;top-rated-container-1&quot;&gt;
        &lt;div class=&quot;video-container&quot;&gt;
            &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;
                poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                    type=&quot;video/webm&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                    type=&quot;video/mp4&quot;&gt;
            &lt;/video&gt;
        &lt;/div&gt;
    &lt;/section&gt;

I have a video element in my HTML code and I have specified its width to be 100% in the CSS. However, the video is not taking up the full width of its container and I cannot figure out why. I have tried overriding conflicting styles and checking the width of the parent container, but the issue persists. I am looking for a solution to make the video element take up 100% of the width of its container.

I have tried specifying the width of the video element to be 100% in the CSS and also tried setting an absolute value for the width using pixels. I expected the video to take up the full width of its container, but it did not. The video element is not stretching to fill the width of the container, and I am not sure what is causing the issue.

I also tried setting the height of the video element to auto, but it still took the height of the entire screen. I kinda like to have a certain height but stretched 100%, like the photo below.

The output should look like this.

答案1

得分: 2

你需要在<video>元素中添加object-fit: fill：

.video-container video {
  width: 100%;
  height: 250px;
  object-fit: fill;
}

编辑后，似乎需要使用object-fit: cover：

.video-container video {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

英文:

You need to add object-fit: fill to the <video>:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
}
.video-container video {
  width: 100%;
  height: 250px;
  object-fit: fill;
}

&lt;section class=&quot;top-rated-container-1&quot;&gt;
        &lt;div class=&quot;video-container&quot;&gt;
            &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;
                poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                    type=&quot;video/webm&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                    type=&quot;video/mp4&quot;&gt;
            &lt;/video&gt;
        &lt;/div&gt;
    &lt;/section&gt;

EDIT: since OP edited the question, seems like object-fit: cover is what's needed here:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
}
.video-container video {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

&lt;section class=&quot;top-rated-container-1&quot;&gt;
        &lt;div class=&quot;video-container&quot;&gt;
            &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;
                poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                    type=&quot;video/webm&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                    type=&quot;video/mp4&quot;&gt;
            &lt;/video&gt;
        &lt;/div&gt;
    &lt;/section&gt;

答案2

得分: 1

代码中的问题是：您已经为视频设置了高度，您可以将其设置为auto或尝试object-fit: cover;。

.video-container video {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

建议将视频容器的高度改为auto或使用object-fit: cover以解决问题。

英文:

Issue in the code : You have set a height to the video. you can set it to auto or try object-fit: cover;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
}
.video-container video {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

&lt;section class=&quot;top-rated-container-1&quot;&gt;
  &lt;div class=&quot;video-container&quot;&gt;
    &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot; poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                    type=&quot;video/webm&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                    type=&quot;video/mp4&quot;&gt;
            &lt;/video&gt;
  &lt;/div&gt;
&lt;/section&gt;

If you need a solution without changing the height please comment below. I'll find a solution. Thanks

答案3

得分: 1

如果您希望使视频具有响应性，并且不想指定高度（这可能是显而易见的原因），您可以使用 aspect-ratio 属性。（这总是个好主意 :)）

如果您只想从视频中取出 250px 的高度，最好将父元素设置为 250px。这样视频就不会被拉伸。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
  height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-container video {
  width: 100%;
  height: auto;
  aspect-ratio: 308 / 125;
  object-fit: fill;
}

<section class="top-rated-container-1">
  <div class="video-container">
    <video autoplay="" loop="" muted="" playsinline=""
      poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
      <source
        src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
        type="video/webm">
      <source
        src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
        type="video/mp4">
    </video>
  </div>
</section>

英文:

If you want to make the video Responsive and don´t wanna give a height (this can be the case for obvious reasons) you can use the aspect-ratio property. (this is always a good idea :))

If you want to take just 250px in height from the video, its a better idea to give the parent element the 250px. so the video wouldnt be stretched out.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
  height:250px;
  display:grid;
  place-items:center;
  overflow:hidden
}
.video-container video {
  width: 100%;
  height:auto;
  aspect-ratio: 308 / 125;
  object-fit:fill
}

&lt;section class=&quot;top-rated-container-1&quot;&gt;
        &lt;div class=&quot;video-container&quot;&gt;
            &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;
                poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                    type=&quot;video/webm&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                    type=&quot;video/mp4&quot;&gt;
            &lt;/video&gt;
        &lt;/div&gt;
    &lt;/section&gt;

答案4

得分: 1

只是为了补充一下，如果你想使视频元素具有响应性，你可以使用CSS的object-fit。您可以将object-fit属性设置为“cover”，这将拉伸视频以填充容器，同时保持其纵横比：

.video-container video {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

或者您可以将object-fit属性设置为“contain”，这将缩小视频以适应容器，同时保持其纵横比：

.video-container video {
  width: 100%;
  height: 150px;
  object-fit: contain;
}

英文:

Just to add, if you want to make the video element responsive, you can use CSS object-fit. You can set the object-fit property to "cover" which will stretch the video to fill the container while maintaining its aspect ratio:

.video-container video {
width: 100%;
height: 150px;
object-fit: cover;
}

Or you can set object-fit property to "contain" which will scale the video down to fit inside the container while maintaining its aspect ratio:

.video-container video {
width: 100%;
height: 150px;
object-fit: contain;
}

答案5

得分: 0

<!-- 开始代码段: js 隐藏: false 控制台: true Babel: null -->

<!-- 语言: lang-css -->
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
    width: 100%;
    margin: 0 auto;
}
.video-container {
    width: 100%;
    border: 1px solid black;
}
.video-container video {
    width: 100%;
    height: 250px;
}

<!-- 语言: lang-html -->
<section class="top-rated-container-1">
    <div class="video-container">
        <video autoplay="" loop="" muted="" playsinline=""
            poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
            <source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
                type="video/webm">
            <source src="httpsa.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
                type="video/mp4">
        </video>
    </div>
</section>

<!-- 结束代码段 -->

英文:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
}
.video-container video {
  width: 100%;
  height: 250px;
}

&lt;section class=&quot;top-rated-container-1&quot;&gt;
        &lt;div class=&quot;video-container&quot;&gt;
            &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;
                poster=&quot;https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2&quot;
                    type=&quot;video/webm&quot;&gt;
                &lt;source src=&quot;https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b&quot;
                    type=&quot;video/mp4&quot;&gt;
            &lt;/video&gt;
        &lt;/div&gt;
    &lt;/section&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

CSS视频未延伸到父容器的100％宽度。

问题

答案1

答案2

答案3

答案4

答案5

为什么HTML和JavaScript中的按钮不起作用？

如何在HTML和CSS中删除`
`内部的空格？

Leaflet标记数字显示在标记上方太高。

CSS居中宽度样式在Vaadin主题中 – Java

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论