Javascript 响应Tumblr视频不工作

我正在尝试制作关于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的部分内容？

无需使用fitvids.js，您可以使用：

然后这就进入了Tumblr模板：

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

添加如下规则：

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

---

无需使用fitvids.js，您可以使用：

然后这就进入了Tumblr模板：

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

添加如下规则：

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

---

保存你的理智

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

Tumblr视频变量

选择视频变量大小时，选择一个小于视频嵌入父级的变量。例如，如果父对象的宽度为

300px

，请使用变量：

{VideoEmbed-250}

任何大于父级的内容都会破坏布局并最终破坏布局

流体视频

正如所建议的，我们需要使用某种

填充顶部
技巧来使视频嵌入流畅/响应。由于每个视频的比率可能不同，因此使用
padding top
的设置值受到限制

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

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

参考资料


Tumblr视频变量-
流体视频-
FitVids.js-
保存你的理智

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

Tumblr视频变量

选择视频变量大小时，选择一个小于视频嵌入父级的变量。例如，如果父对象的宽度为
300px
，请使用变量：
{VideoEmbed-250}

任何大于父级的内容都会破坏布局并最终破坏布局

流体视频

正如所建议的，我们需要使用某种
填充顶部
技巧来使视频嵌入流畅/响应。由于每个视频的比率可能不同，因此使用
padding top
的设置值受到限制

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

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

参考资料


Tumblr视频变量-
流体视频-
FitVids.js-
谢谢。此外，如果通过{Video}模板标记使用YouTube或Vimeo嵌入，这将不起作用-该标记将它们包装在第二个iframe中。但是，如果它们作为文本帖子插入，我确实可以工作。这就是为什么需要使用
{VideoEmbed-500}
，而不是
{Video-500}
。和YouTube视频一起工作。啊，好的。实际的区别是什么？文档上写着lightbox，但我在两个标签上都没有看到。是的，文档不清楚，但我发现的区别是，
{Video-500}
与
{VideoEmbed-500}
相同，另外还有一些针对不会编码的人的修复方法D我之所以使用后者，只是因为我不想让Tumblr添加不必要的元素。@Mikeddt这并不完全正确：YouTube视频可能会输出相同的代码，但Tumblr视频不会。看一看，打开它的源代码，看看Tumblr视频嵌入代码是完全不同的，生成的iframe将位于
div
--至于解决方案，是的，这是一个限制，但正如我在答案中指定的，您只需在哈希标记中指定比率并为其创建一个规则。谢谢。此外，如果通过{Video}模板标记使用YouTube或Vimeo嵌入，这将不起作用-该标记将它们包装在第二个iframe中。但是，如果它们作为文本帖子插入，我确实可以工作。这就是为什么需要使用
{VideoEmbed-500}
，而不是
{Video-500}
。和YouTube视频一起工作。啊，好的。实际的区别是什么？文档上写着lightbox，但我在两个标签上都没有看到。是的，文档不清楚，但我发现的区别是，
{Video-500}
与
{VideoEmbed-500}
相同，另外还有一些针对不会编码的人的修复方法D我之所以使用后者，只是因为我不想让Tumblr添加不必要的元素。@Mikeddt这并不完全正确：YouTube视频可能会输出相同的代码，但Tumblr视频不会。看一看，打开它的源代码，看看Tumblr视频嵌入代码是完全不同的，生成的iframe将位于
div
--至于解决方案，是的，这是一个限制，但正如我在答案中指定的，您只需在哈希标记中指定比率并为其创建一个规则。