VideoJs宽度问题

Question

我试图与一个视频工作，并让它在网站上渲染。

由于法律原因，我不允许发布视频，但是对于实际视频的宽度和高度有一些疑问。

视频的原始高度和宽度是960x540，他们希望它在网站上呈现的高度低1/3，视频是全宽的(外部没有黑条)。

我一直在解释，当你缩小高度时，宽度必须按比例变化，这样视频才能保持比例。

他们给我举了这样的例子：http://pillar.mediumra.re/home-landing-service-3.html，但无法理解头上的视频是从inital值中裁剪出来的，并且使用对象适配，这在IE11中不起作用，等等。

在css中我还能做什么或者改变什么来完成这个工作吗？

我试着在VLC中重新调整视频的标度并使用它，但是它得到了所有的像素，当我做视频vjs类vjs-16-9时，它的高度将与之前的视频相同。

另外，这个视频是一个18‘t的视频，我尝试使用vimeo插件来获取更少的带宽，但是当你在视频上悬停时，它会显示来自vimeo的控制栏，我想他们不会想要的。

我也试着玩某些css类，但是它没有正确地缩小(有黑条)。

/* Video Code Changes */
.video-js.vjs-fill{
 /* max-height:250px !important;   */
}   
.video-js .vjs-tech{
 /* max-height:75% !important;  */
}
/* end Video Code changes */

以下代码供参考(任何想法)：

 <video id="my-video" class="video-js vjs-default-skin vjs-16-9" preload="auto" poster="MY_VIDEO_POSTER.jpg"  data-setup='{"controls": false, "autoplay": true, "preload": "auto", "muted": true, "loop": true}'>

                            <source src="content/video/video_hi.mp4" type='video/mp4' >


                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>  

Answer 1

他们明白我的解释，他们想要的想法无法实现。

Answer 2

一个解决方案是创建一个包装器元素，让我们将其命名为.video-wrapper，并将video标记放入其中。

<div class="video-wrapper">
  <video src="..." autoplay></video>
</div>

然后，您可以给包装器元素首选的高度，居中其子元素(类似于background-position: center)，并隐藏溢出。video元素现在只需要填充父元素的宽度，应该完成。

.video-wrapper {
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.video-wrapper > video {
  width: 100%;
}

您可以看看我的http://cdpn.io/e/xPbJeP，看看结果如何。