我创建了一个 tumblr 主题。一切都很顺利,直到我决定在 tumblr 视频上传上发布视频。我在主页上有一个 250x196 像素的盒子,所有东西都可以放进去。
- 如果是照片,我只是将其设为 250x196 像素(我不在乎 长宽比。我使用 jQuery 来保持纵横比,但我不喜欢 结果)。
- 如果是照片集,我会使用 everythingslider 并创建幻灯片。
- 如果是文本帖子,我使用 jquery 并将第一张图像作为 缩略图。
- 如果是与照片相同的视频。我只是调整 iframe 的大小。在 至少我是这么认为的。
我还使用 Prettyphoto 作为图像和视频的灯箱克隆。
所以当我使用tumblr上传视频时,我遇到了以下问题:
- 首先,我认为视频没有获得 iframe 的宽高比 其原因可能是高度的数据值和 iframe 正在使用。
- 如您所见 here ;为了使 iframe 出现,我使用了内联方法。我有一个隐藏的 div,其中有 500 像素版本的视频。问题是 {Video-250} 和 {Video-500} tumblr 变量都为具有相同 id 的 tumblr 视频创建了一个 div。因此,它会将隐藏的视频移至 250 像素版本旁边。
- tumblr 内置的视频灯箱与 Prettyphoto 存在冲突。当我单击视频的全屏时,z 索引出现问题。我没有花时间解决这个问题,因为我已经遇到了很多问题。
作为解决方法,我所做的是:
<div class="media" data-embed="{JSVideoEmbed-250}" data-video="{JSVideo-250}"></div>
您可以在我用三个随机视频创建的测试博客上准确地明白我的意思:
但是调整大小的问题仍然存在。 iframe 是 250x196 像素,但内容不是。我也不明白为什么 tumblr 在第一个视频中发布了 javascript。它在页面末尾发布了相同的脚本。
我问的问题可能有点难以表达。我希望测试博客能够帮助您理解我的意思。
最佳答案
尝试使用响应式嵌入 - 这应该会缩放您的电影以填充容器:http://webdesignerwall.com/tutorials/css-elastic-videos
关于jquery - 调整 tumblr 视频的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13694421/