Question

我无法将视频强制为可用空间和自动高度的全宽。 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

将此添加到您的CSS

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

OR

#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>

Answer 2

首先，600px的max-height将根据浏览器大小限制它。

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

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

我的vimeo视频没有显示正确的一些建议

2 个答案: