0

这是一个很难正确表达的问题，所以我创建了一个 Fiddle 来更准确地表示我正在尝试做的事情：

http://jsfiddle.net/LAtPJ/

.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 呈现）。

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

4

4 回答 4

0

100% 的高度是具有挑战性的，你可以在这里看到：如何在不指定父级高度的情况下强制子级 div 达到父级 100% 的高度？

如果可以的话，你最好的选择可能是使用 jQuery。

于 2013-09-23T16:12:24.157 回答
0

您可以尝试为.thumbnailContainer和.thumbnailContainer.video_embed iframe类指定最小和最大高度。当然，这在移动设备上未经测试，我不确定非响应式视频嵌入会如何影响宽高比。希望这可以帮助。

演示在这里。下面的代码片段：

.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;
}
于 2013-09-23T16:17:31.963 回答
0

我认为记录我是如何决定这样做的可能很有用。

@ivarPrudnikov 好心地建议从 API 中获取 YouTube 缩略图。我已经考虑过一些事情，但是，当然，缩略图容器是否包含 iframe、文本或实际上并不重要，同样的问题存在。

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

可能还有其他方法……但我开始觉得它们太复杂了，以后很难管理，并且可能会遇到与某些浏览器的兼容性问题。

所以，我求助于做服务器端的所有事情。

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

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

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

非常感谢，永远！

克里斯

于 2013-09-24T00:42:13.360 回答
0

这就是我使用的。它根据嵌入的宽度和高度属性设置填充并计算纵横比。只要您在 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%;
}
于 2015-02-25T15:07:41.497 回答