我正在尝试使有关Tumblr主题的视频具有响应性。我正在fitvids.js调整Vimeo和YouTube嵌入的大小。但是，它不适用于Tumblr的本地视频播放器。
Tumblr本机视频播放器以固定的宽度上传iframe-我可以更改此宽度，但是控件的格式却非常笨拙（它们必须取决于固定的高度或宽度）。
另外，iframesrc是隐藏的（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，可以使用padding-top技巧：
.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>
注意：这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%*/
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句