Question

这是一个难以理解的问题，因此我创建了一个小提琴，以更准确地表示我正在尝试做的事情：

.thumbnailContainer.video_embed
{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.thumbnailContainer.video_embed iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上代码适用于非常精彩，反应灵敏的YouTube视频。但...

如果您在媒体库的背景下想象这一点，图片和视频应该在完全响应的设计中共存。

会有行和行的媒体，图像和视频之间的宽高比可能会有所不同，因此我们会留下不再统一的内容。

实际上，YouTube视频应该是100％宽，但它的高度应该不高于图像的高度。我之前有一个版本，它都是固定的宽度和高度，因此非常简单的每个图像和每个iframe都是200 x 200.现在，我想要一些更适合移动设备的东西，所以尽管图像我确切地知道我需要它们，但视频却不是。

有什么想法吗？

最终解决方案（如果有的话）应该最好只是CSS而不一定是特定于YouTube（某些视频将是其他服务，但主要通过像YouTube这样的iframe呈现）。

你们真棒，所以希望你能想出一些很酷的东西。非常感谢你。

Answer 1

100％的身高具有挑战性，您可以在此处看到：How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

你最好的选择可能是使用jQuery，如果这是一个选项。

Answer 2

您可以尝试同时为.thumbnailContainer和.thumbnailContainer.video_embed iframe类提供最小和最大高度。当然，这在手机上尚未经过测试，我不确定宽高比会如何影响非响应式视频嵌入。希望这会有所帮助。

DEMO在这里。以下代码段：

.thumbnailContainer
{
    overflow: hidden;
    position: relative;
    width: 100%;    
    min-height: 200px;
    max-height: 200px;
}

.thumbnailContainer.video_embed iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 200px;
}

Answer 3

我认为记录我决定如何做到这一点可能很有用。

@ivarPrudnikov建议从API获取YouTube缩略图。我已经考虑过的东西，但是，当然，缩略图容器是否包含iframe，文本或实际上是图像并不重要，存在同样的问题。

没有直接的方法可以保持容器与其他容器的大小相同，而不存在具有确切纵横比的图像。

可能还有其他方式......但我开始觉得它们过于复杂，难以管理，可能会遇到某些浏览器的兼容性问题。

所以，我已经采取了服务器方面的一切。

无论如何都是用PHP编写的，所以我实际上将YouTube视频ID传递给PHP脚本，直接从YouTube获取缩略图，然后根据所需的缩略图宽度裁剪并调整大小。高度和纵横比。

这一切都在飞行中发生。我很可能会实现某种基本的缓存机制，实际上我最终会在本地保存图像。

在此之前，问题已经解决了，我非常感谢每一个有时间回答和/或评论的人。

非常感谢，总是！

克里斯

Answer 4

这就是我使用的。它根据嵌入宽度和高度属性设置填充并计算宽高比。只要你在iframe周围有2个div（你可以调整嵌入）并且在iframe中设置宽度和高度作为属性，这将有效。

jQuery(document).ready(function() {
    jQuery('.embed-wrapper').each(function(){
        dcembedheight = jQuery('iframe', this).attr( "height" );
        dcembedwidth = jQuery('iframe', this).attr( "width" );
        ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%';
        jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px");
        jQuery('.embed-container', this).css({"padding-bottom": ratio});
    });
});

HTML - 排除100％宽度的嵌入包装并仅使用16：9比例的css

<div class="embed-wrapper">
<div class="embed-container">
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>

CSS - 注意填充是由jquery设置的，但是css包含默认的16：9比例填充

.embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

带图像的响应式图库和YouTube嵌入宽高比

4 个答案: