我正在努力让我的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的某些内容?
答案 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
确保{TagsAsClasses}
元素
.videoWrapper
<div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>
添加如下规则:
.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']" });
<强>参考强>