响应Tumblr视频不起作用 [英] Responsive Tumblr videos not working

问题描述

我正在努力让我的Tumblr主题视频响应。我正在使用 fitvids.js 来调整Vimeo和YouTube嵌入的大小。但是，它不适用于Tumblr的原生视频播放器。

I'm trying to make videos on my Tumblr theme responsive. I am using fitvids.js to resize Vimeo and YouTube embeds. However, it won't work with Tumblr's native video player.

Tumblr原生视频播放器以固定宽度上传iframe - 我可以更改此设置，但随后格式化控制非常不稳定（它们必须取决于固定的高度或宽度）。

The Tumblr native video player uploads an iframe at a fixed width — I can change this, but then the formatting of the controls are very wonky (they must depend on the fixed height or width).

此外，隐藏了iframe src （ about：blank ），Tumblr必须做一些自定义替换它：

Also, the iframe src is hidden (about:blank), and Tumblr must do something custom to replace it:

<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？

Is there a solution to access an API for this video player, or at least change some of the contents of the iframe?

推荐答案

无需使用fitvids.js，您可以使用 padding-top 技巧：

No need to use fitvids.js, you can use the 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模板：

And then this goes in the Tumblr template:

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

你可以在此tumblog

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

NOTE: that 56.25% is the result of 9/16, that means that the videos are fixed at the ratio 16:9. If you plan on having square videos or any other ratio, like 4:3

1. 应用 #firdirds
   

2. 确保您在 .videoWrapper 元素上 {TagsAsClasses} / p>
   
   

1. apply a hashtag like #fourthirds

2. make sure you have {TagsAsClasses} on the .videoWrapper element

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

添加如下规则：

add rules like this one:

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

这篇关于响应Tumblr视频不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！