0

在我正在开发的 tumblr 主题中，我使用 fitvids.js 来制作响应式视频。

所有常见的嵌入（YouTube、Vimeo 等）都像魅力一样工作。

我编辑了 FitVids.js 以支持 Tumblr 视频上传（tumblr 视频播放器）。它在桌面上运行正常，但在移动设备上不起作用。图片被裁剪，播放按钮太大，超出了视频容器。你根本无法播放视频。

在此页面上它可以工作，但我只是不知道如何： http: //mikehacks.tumblr.com/post/86858788257

我的html是：

<div class="video-container">
  <p>{VideoEmbed-700}</p>
</div>

视频容器仅用于添加一些边距：

.video-container {
  margin-top: 30px;
}

我读了这个问题，但我依赖于 fitvids，js，我不能指望用户为纵横比添加标签。这也不适用于不常见的纵横比。抱歉开始一个新问题；我还不能发表评论。

我真的坚持这一点，非常感谢任何帮助！

4

1 回答 1

1

我终于让 tumblr 视频在移动设备上工作——仍然使用 fitvids。这相当简单，但也许有人会发现这很有用：

由于 tumblr 视频播放器在移动设备上具有完全不同的标记（它只是视频的链接），因此很明显 fitvids 不会做任何事情。

我使用这个简单的 CSS 仅在触摸设备上调整 tumblr 视频：

.touch .video-container a {
    width: 100% !important;
    height: auto !important;
}

（我去掉了 {VideoEmbed-700} 周围的 p 标签，因为它导致视频根本无法播放。）如果你想知道的话，Modernizr 会生成触摸类。

这样您就不必处理纵横比的标签！

于 2014-09-01T23:26:01.460 回答