响应式视频未按预期调整答案

【问题标题】：Responsive video don't adjust as expected响应式视频未按预期调整
【发布时间】：2017-04-11 20:02:24
【问题描述】：

我的主要目标是归档，我想在我的页面顶部有一个背景视频，但现在的问题是我希望视频具有响应性，它有点响应但以错误的方式，当我减少屏幕视频变小了，不是增加高度，而是宽度和高度变小了，我只是希望宽度变小，高度增加。

这是一个例子：

当前行为：

我需要什么：

我的html代码：

<section class="custom content_section bg_fixed white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">


            <div id="video_overlays"></div>

            <div class="container vertical-center">
                <div id="over">
                    <div class="title-wrapper main_title  centered upper">
                        <h2 id="video_title"><span class="line"></span>VIDEO TITLE</h2>
                    </div>

                    <div class="description4 centered">
                        <p id="video_sub_title"><b>LOREM IPSUM A SIMPLE DESCRIPTION<br>
Usability and simple deployment are the key words.</b></p>

                    </div>
                </div>
            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>

    </section>

【问题讨论】：

标签： html css twitter-bootstrap video responsive-design

【解决方案1】：

这是一个工作示例：

http://codepen.io/panchroma/pen/YVKNdr

为包含您的视频的 div 尝试以下样式。重要的一点是您将 min-height 和 min-width 设置为 100%，然后使用 transform:translate 使视频居中。

希望这会有所帮助！

CSS

#player {
  position: fixed;
  top: 50%; left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

【讨论】：

不起作用：S 同样的效果，我尝试将其应用于父 div，但视频只是消失了
请参阅@FilipeCosta 上方的更新
几乎解决了，我需要删除我的类嵌入响应和纵横比 1，但现在纵横比仍然有 1 个问题，当我减小尺寸时，我看到顶部的黑色边框和底部，有没有一种简单的方法来纠正这个问题？
嘿@FilipeCosta，创建一个我的 codepen 的分支，进行更改，我会在有机会时查看它们。

【解决方案2】：

试试这个

CSS

#videocontainer{
    position:absolute;
    z-index:-1;
    background:url(../the link to image when video uploads or not supported by browser.jpg) center center no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
}
.videobg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
    z-index: 1;
}

您的 HTML

<div class="videocontainer>
    <video class="videobg" controls autoplay loop id=player  poster="http://the link to image when video uploads or not supported by browser" >
        <source src="link to your mp4 video file.mp4" type="video/mp4" >
    </video>
</div>

【讨论】：