响应式 Tumblr 视频不起作用答案

【问题标题】：Responsive Tumblr videos not working响应式 Tumblr 视频不起作用
【发布时间】：2014-06-06 14:48:34
【问题描述】：

我正在尝试在我的 Tumblr 主题上制作响应式视频。我正在使用 fitvids.js 调整 Vimeo 和 YouTube 嵌入的大小。但是，它不适用于 Tumblr 的原生视频播放器。

Tumblr 原生视频播放器以固定宽度上传 iframe — 我可以更改这一点，但是控件的格式非常不稳定（它们必须取决于固定的高度或宽度）。

另外，iframe src 是隐藏的 (about:blank)，Tumblr 必须做一些自定义来替换它：

<iframe width="500" height="281" src="about:blank" id="tumblr_video_iframe_87978936100" class="tumblr_video_iframe has_lightbox" data-origin="ckone-dev.tumblr.com" data-width="500" data-height="281" frameborder="0" scrolling="no" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" seamless="" style="display:block;background-color:transparent;overflow:hidden;">
</iframe>

是否有解决方案可以访问此视频播放器的 API，或者至少更改 iframe 的某些内容？

【问题讨论】：

标签： javascript iframe video tumblr

【解决方案1】：

无需使用fitvids.js，可以使用padding-top trick：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

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

然后这进入 Tumblr 模板：

<div class="videoWrapper">{VideoEmbed-500}</div>

您可以在 this tumblog 上看到它的实际效果

注意：56.25% 是 9/16 的结果，这意味着 视频以 16:9 的比例固定。如果您打算方形视频或任何其他比例，例如 4:3

应用标签，如 #fourthirds

确保 {TagsAsClasses} 位于 .videoWrapper 元素上

<div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>

添加这样的规则：

.fourthirds {
    padding-bottom: 75%; /*video is 4:3, therefore 3/4 = 0.75 = 75%*/
}

【讨论】：

谢谢。此外，如果通过 {Video} 模板标签使用 YouTube 或 Vimeo 嵌入，这将不起作用 - 将它们包装在第二个 iframe 中。但是，如果将它们作为文本帖子插入，我确实可以工作。
这就是为什么你需要使用{VideoEmbed-500}，而不是{Video-500}。 It's confirmed 也可以处理 YouTube 视频。
啊，好吧。实际的区别是什么？文档说灯箱，但我在任何一个标签上都没有看到。
是的，文档不清楚，但我发现{Video-500} 与{VideoEmbed-500} 相同，加上一些针对无法编码的人的修复。 :D 我使用后者只是因为我不希望 Tumblr 添加不必要的元素。
@mikedidthis 这并不完全正确：YouTube 视频可能会输出相同的代码，但 Tumblr 视频不会。看看this tumblr，打开它的源代码，发现Tumblr 视频嵌入代码完全不同，生成的iframe 将在div 中。 ——至于解决方案，是的，这是一个限制，但正如我在答案中指定的那样，您只需在主题标签中指定比率并为其创建规则。

【解决方案2】：

保持理智！

我添加这个是为了参考和理智。要使 Tumblr 自己的视频具有响应性并且不破坏您的布局，有两个关键部分。

Tumblr 视频变量

选择视频可变尺寸时，请选择小于视频嵌入父级的尺寸。例如，如果父级为 300px 宽，则使用变量：{VideoEmbed-250}。

任何比父级更大的东西都会破坏你的布局并最终破坏它，visual example。

流体视频

按照建议，我们需要使用某种padding-top 技巧来使视频嵌入流畅/响应迅速。使用padding-top 的设置值受到限制，因为每个视频的比例可能不同。

或者，您可以将fitvids.js 与以下自定义选择器一起使用：

$('.video-wrapper').fitVids({ customSelector: "iframe[src*='tumblr.com'], iframe[src='about:blank']" });

参考文献

Tumblr 视频变量 - https://www.tumblr.com/docs/en/custom_themes#video-posts
流体视频 - http://webdesignerwall.com/tutorials/css-elastic-videos
FitVids.js - https://github.com/davatron5000/FitVids.js

【讨论】：