17

这是我设法通过蛮力修复的错误，但我不明白为什么该解决方案有效。

问题是嵌入的 YouTube 视频无法在 iPad 上的特定（响应式）站点上（在 iOS7 中测试）在横向视图中运行。我设法将其缩小到一个特定的 CSS 规则，当浏览器足够宽时，该规则在标题中显示搜索输入，因此它会显示在 iPad 的横向视图中，而不是纵向视图中。

经过一番蛮力摆弄后，我发现type="search"从输入标签中删除 （这会导致它回退到 default type="text"）可以解决问题。我的搜索都没有给出解释为什么这有效，甚至没有其他人遇到同样的事情。

有关该错误的更多详细信息

该网站首先显示一张图片，点击后将通过 JavaScript 将其替换为 YouTube iframe。在第一次点击之后，它会在桌面浏览器上自动播放，在 iPad 上它会加载视频，但直到用户再次按下它才会播放。

如果type="search"输入可见 ( display: block;)，则点击嵌入的视频不会使其播放；水龙头不会有明显的反应。如果我放大并点击顶部的控件，例如视频的名称，我可以看到它们带有下划线，并且测试表明没有元素覆盖 iframe 和拦截事件。

奇怪的是，点击 iframe 右侧的最边缘会导致视频开始正​​确播放。否则，将 iPad 更改为纵向视图（导致通过 CSS 隐藏搜索输入）将使 iframe 能够被单击以开始播放视频。第一次单击后，无论搜索输入是否显示，所有视频控件都将起作用。

4

1 回答 1

3

刚刚亲身体验了这一点，并想为你写下这篇文章表示感谢。您的 SO 问题，即使没有答案，也为我指明了正确的方向。

就我而言，这与 Youtube 无关。我有一个由 Drupal 在一个大型站点中生成的页面，其中站点范围的搜索机制使用了一个自动完成的 drupal 模块，该模块具有type="search"作为主要输入的类型。

在 IOS 中，用户报告说 Facebook、Twitter 和 Google Plus 各自的“喜欢”按钮都不起作用，页面中嵌入了一个更大的 Angular 应用程序。他们都使用 iframe，而且似乎都没有响应点击。

将这个看似无害、不相关的输入类型从更改search为text立即解决了这个问题。

莫名其妙。

于 2015-04-21T14:56:19.367 回答