我的 vimeo 视频显示不正确请提供一些建议

Question

我无法强制我的视频为可用 space 的全宽和自动高度。 iframe 是全宽的，但视频的尺寸非常小。

CSS

.embed-container {
    position: relative; 
    height: 0; 
    overflow: hidden; 
    width: 100% !important; 
    height: auto !important;
    max-height: 600px !important;
}

HTML

<div id="fourth-block">
  <div id="embed_container" class='embed-container'>
    <iframe src='http://player.vimeo.com/video/119060390?color=de141b' id="video" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </div>
</div>

Answer 1

首先，600 像素的最大高度将根据浏览器大小进行限制。

某些浏览器的 100% 可能与其他浏览器不同，因此您将获得不同的高度。

但要解决手头的问题，您应该将 iframe 放在 单独的 div 中，并将 iframe 设置为 max- height:100% 和 max-width:100% 完美适合 div。

Answer 2

将此添加到您的 CSS

.embed-container iframe{height:100%;width:100%;}

或

#embed_container iframe{height:100%;width:100%;}

这会将 iframe 推至 100%，因此您可以使用 .embed-container 或 embed_container 作为 iframe 的容器。

<div id="embed_container" class='embed-container'>
<iframe src='http://player.vimeo.com/video/119060390?color=de141b' id="video" frameborder='0'></iframe>
</div>

我的 vimeo 视频显示不正确请提供一些建议

my vimeo video is not displayed right pls some advice

html

css

video

vimeo