响应Tumblr视频不起作用

时间:2014-06-06 14:48:34

标签: javascript iframe video 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的某些内容?

2 个答案:

答案 0 :(得分:2)

无需使用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. 应用 #firdirds
  2. 等主题标签
  3. 确保{TagsAsClasses}元素

    上有.videoWrapper
    <div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>
    
  4. 添加如下规则:

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

答案 1 :(得分: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']" });

<强>参考