【发布时间】:2012-12-04 00:51:10
【问题描述】:
我创建了一个 tumblr 主题。一切正常,直到我决定在 tumblr 视频上传上发布视频。我在主页上有一个 250x196 像素的框,一切都在里面。
- 如果是照片,我就让它250x196像素(我不在乎 纵横比。我使用 jQuery 来保持纵横比,但我不喜欢 结果)。
- 如果是照片集,我会使用任何东西滑块并创建幻灯片。
- 如果是文本帖子,我使用 jquery 并将第一张图片作为 缩略图。
- 如果是与照片相同的视频。我只是调整 iframe 的大小。在 至少那是我认为我在做的事情。
我还使用 prettyphoto 作为图像和视频的灯箱克隆。
所以我在用tumblr上传视频的时候,遇到了这些问题:
- 首先视频没有得到我认为的 iframe 的纵横比 原因可能是高度的数据值和 iframe 正在使用。
- 如你所见here;为了让 iframe 出现,我使用的是内联方法。我有一个隐藏的 div,其中包含 500 像素版本的视频。问题是 {Video-250} 和 {Video-500} tumblr 变量都为具有相同 id 的 tumblr 视频创建了一个 div。因此,它会获取隐藏视频并将其移至 250 像素版本旁边。
- tumblr 的视频内置灯箱与 prettyphoto 冲突。当我单击视频的全屏时,z-indexes 出现问题。我没有花时间解决这个问题,因为我已经遇到了很多问题。
作为一种解决方法,我所做的是:
<div class="media" data-embed="{JSVideoEmbed-250}" data-video="{JSVideo-250}"></div>
您可以在我使用三个随机视频创建的测试博客上准确了解我的意思:
但调整大小的问题仍然存在。 iframe 是 250x196 像素,但内容不是。我也不明白为什么 tumblr 在第一个视频中发布了 javascript。它在页面末尾发布的相同脚本。
我的问题可能有点难以表达。我希望测试博客能帮助你理解我的意思。
【问题讨论】:
-
在您的测试 tumblr 上,例如 iframe 中的最后一个视频不应该按比例缩小以适应盒子,对吧?现在,如果有人从 css 规则
.tumblr_video_player.portrait.tvp_video { /*...*/ }禁用了 firebug 中的width: 0!important;,它会填充容器。这是你想要达到的目标吗?