html - Tumblr 托管的视频流体宽度和高度

Question

我想制作一个有多种帖子宽度可供选择的 Tumblr 主题，因此设置视频帖子非常困难。

这段代码:

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

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

和

{block:Video}
<div class="video-container">
{Video-500}
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}

可以完美地处理 YouTube 视频，但它会减少 Tumblr 托管的视频。 最新的默认 Tumblr 主题 Optica有使这项工作成功的东西，这意味着 Tumblr 托管的视频保持原来的高度，但我不知道是什么......有人可以帮忙吗？不一定与 Optica 主题中的工作方式相同，只是......任何方式？

Answer 1

遗憾的是，与 Youtube 不同，Tumblr 的视频似乎没有遵循特定的宽高比。

padding-bottom: 56.25% 为您提供 16:9 的宽高比 ( http://css-tricks.com/fluid-width-youtube-videos/ )。

每个 Tumblr 视频可能有不同的宽高比，因此每个视频都需要不同的 padding-bottom 值。

最简单的解决方案是使用 fitVids.js:

jQuery 版本:http://fitvidsjs.com/

Javascript 版本:https://github.com/rosszurowski/vanilla-fitvids

您可以自己动手，任一版本的源代码都很好地解释了进行计算所需的内容。

使用 Fitvids.js 启用 Tumblr 视频

对于 Tumblr 托管的视频，src 有点不同。他们做了一些 javascript 魔术。

$(".videos").fitVids({ customSelector: "iframe[src='about:blank']"});