如何定义嵌入视频区域高度？答案

【问题标题】：How to define embed video area height?如何定义嵌入视频区域高度？
【发布时间】：2015-10-28 08:01:32
【问题描述】：

我正在使用 mediaelement.js 加载带有自定义 CSS 的 youtube 视频，它工作正常。

html

<div class="wrap">
  <video width="1049" height="590" id="yt_video" style="width: 100%; height: 100%;">
      <!-- Pseudo HTML5 -->
      <source type="video/youtube" src="https://www.youtube.com/watch?v=ZSQDk_zLkiM" />
  </video>
</div>

css

.wrap{width:100%;}

$('video').mediaelementplayer({
  success: function(mediaElement, domObject) {
      if (mediaElement.pluginType == 'flash') {
          mediaElement.addEventListener('canplay', function() {
              mediaElement.play();
              mediaElement.pause();
          }, false);
      }
  }
});

问题：我需要视频播放器的宽度为 100%，最大高度为 590 像素，嵌入视频也应为 590 像素，但嵌入视频也填充 100%，并且它的高度溢出了播放器区域。

【问题讨论】：

标签： javascript css mediaelement.js

【解决方案1】：

一般来说，不要尝试使用“100%”来设置高度。我建议使用 javascript 计算所需的高度并以这种方式应用它，或者设置一个静态像素值。

【讨论】：

【解决方案2】：

尝试将overflow: hidden 添加到您的CSS。当视频高于其包含的 div 时，它应该“裁剪”视频。

您可以改为使用object-fit: fill 在可用空间中拉伸图像。但是，这在 IE 中不起作用。

【讨论】：

overflow:hidden 只会将视频内容切成两半，它不会解决这个问题。我需要视频具有.wrap 区域的 100% 高度
所以您想拉伸视频以覆盖该区域？
是的，也试过用embed{height:100%}，但是不行
在答案中添加了信息。 object-fit 属性可以帮助您吗？虽然它没有完整的浏览器支持。