javascript - 响应式 Tumblr 视频不起作用

Question

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

Tumblr native 视频播放器以固定宽度上传 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

1. 应用标签，例如 #fourthirds

2. 确保在 .videoWrapper 元素上有 {TagsAsClasses}

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

3. 添加这样的规则:

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