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']"});

Tumblr主持视频流体宽度和高度

1 个答案: