Question

我正在使用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%;}

JS

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

问题：我需要视频播放器的宽度为100％，最大高度为590px，嵌入视频也应该有590px，但嵌入的视频也是100％填充，而且它的高度超出了播放器区域。

Answer 1

作为一般规则，请勿尝试使用“100％”设置高度。我建议使用javascript计算所需的高度并以这种方式应用，或设置静态像素值。

Answer 2

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

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

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

2 个答案: