Question

我正在努力让我的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的某些内容？

Answer 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

应用 #firdirds

确保{TagsAsClasses}元素

上有.videoWrapper

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

添加如下规则：

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

Answer 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

响应Tumblr视频不起作用

2 个答案: