如何使响应Vimeo嵌入扩大到最大高度？

我使用FitVids使我的Vimeo嵌入响应。我想现在在其中一个嵌入式视频上设置最大高度。我尝试了很多不同的方法，并且所有这些方法都因不同的原因而失败。如何使响应Vimeo嵌入扩大到最大高度？

我有我要见我的解决方案的几个不同的标准：

在视口中，相对单位
裹在顶部和底部填充的容器嵌入设置一个最大高度
视频应该始终填充视口的宽度，增加其本身和其父级的高度，除非这会导致它超过最大高度

这里是a pen with my latest attempt。在这个容器中，容器延伸过视频。这是因为响应式嵌入使用填充的方式，但我不确定如何修复它。

这里的标记：

<div class="video"> 
    <iframe src="https://player.vimeo.com/video/139407849" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

和CSS：

.video { 
    padding: 6rem 0; 
    background-color: red; 
    overflow: hidden; 
} 

.video iframe { 
    max-height: 80vh ; 
}

一切似乎相当简单。然后，我在视频上运行FitVids以使其正确缩放。我能做些什么来让我的最高身高在这里工作？

更新：看起来这种响应式视频嵌入技术可以对容器的宽度做出响应，但对高度没有响应。因此，我无法像我所希望的那样为使用纯CSS的问题找到解决方案。相反，我写了一些Javascript来计算我需要做的宽度调整，如果我的视频超过了所需的高度。我仍然喜欢听到更好的解决方案，但现在这会起作用。

来源

2015-09-17 raddevon

-3

不要嘟my我自己的号角或任何东西，但看看这个。根据要求

https://github.com/mikerodham/responsify

编辑：

这个插件通过自己建将采取任何嵌入影片，使其完全响应，如果嵌入一个div内与类responsify

来源

2015-09-17 23:40:57

请要么细说这是什么是否及如何提供帮助，或将其删除并作为评论发布。堆栈溢出不鼓励链接回答。谢谢！ –

我已经这样做了，我的道歉。 –

@MikeRodham除了应用60％与56.25％的“padding-top”之外，CSS的样式视频容器与FitVids完全相同。我尝试将填充值更改为您的值，但它没有解决我的问题。 – raddevon

如何使响应Vimeo嵌入扩大到最大高度？

回答

相关问题