html - 更改视频的高度并保持相同的宽度

Question

我有一个视频我想改变高度并保持相同的宽度例如全屏宽度我认为是 100% 和高度只是 200px 与这个网站 www.paypal.com 相同 问题是当我更改高度宽度时也会自动更改，视频会转到中心(水平拉伸(stretch))

        <video autoplay class="embed-responsive-item">
          <source src=test.mp4 type=video/mp4>
        </video>

视频{宽度:100%；高度:200px；

提前感谢任何帮助

Answer 1

PayPal 网站使用 CSS 属性 object-fit: cover以适应相同宽度的视频。

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.hero-home video {
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    position: absolute;
    left: 0px;
    z-index: -1;
    object-fit: cover; /* this makes it fit within the video container */
    opacity: 0.9;
    transition: opacity 0.3s ease 0s;
}

object-fit 的可能值

/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

他们还混合使用了 max-width , min-width , 和 min-height在 <video> 的一些父元素上元素。

只需检查 CSS，看看它们在做什么。您会看到视频的一部分被隐藏，而不是在 .video-container 上显示视频的所有高度。使用 overflow:hidden .