响应式 tumblr 视频不适用于移动设备答案

【问题标题】：responsive tumblr video doesn’t work on mobile响应式 tumblr 视频不适用于移动设备
【发布时间】：2014-10-25 22:56:04
【问题描述】：

在我正在开发的 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;
}

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

我真的很困惑，非常感谢任何帮助！

【问题讨论】：

Fitvids.js 似乎只支持少数视频源。如果它与 Tumblr 视频不兼容，您必须寻找其他内容或尝试编辑其代码。该 tumblog 上使用的技术与其他 StackOverflow 问题中描述的完全相同，并且它适用于用户定义的标签。
感谢您这么快回答！我想也许有一些 javascript 可以让 tumblr 视频在移动设备上运行。我将尝试寻找替代方案或编辑代码。谢谢！
实际上，可以设置 FitVids 来处理自定义视频供应商。也就是说，在这种情况下它不会起作用。在移动设备上，Tumblr 不为视频提供 iFrame。相反，它提供了一个锚链接，我现在看到你在回答中提到了。
Responsive Tumblr videos not working的可能重复

【解决方案1】：

我终于让 tumblr 视频可以在移动设备上播放 - 仍然使用 fitvids。这相当简单，但也许有人会觉得这很有用：

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

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

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

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

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

【讨论】：