嵌入式YouTube视频不'；当HTML5搜索输入可见时，不要在iPad（iOS 7）上播放

这是一个我已经设法用蛮力修复的bug，但我不明白为什么这个解决方案有效

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

在进行了一点蛮力摆弄之后，我发现从输入标记中删除

type=“search”

（这会使它返回到默认的

type=“text”

）可以解决问题。但是，我的搜索结果中没有一个能解释为什么会出现这种情况，甚至没有其他人经历过同样的情况

关于这个bug的更多细节 该网站的工作原理是首先显示一幅图像，点击后将通过JavaScript替换为YouTube iframe。在第一次点击之后，它将在桌面浏览器上自动播放，在iPad上它将加载视频，但在用户再次按下之前不会播放

如果

type=“search”

输入可见（

display:block；

），则点击嵌入式视频不会导致播放；对水龙头没有明显的反应。如果我放大并点击顶部的控件，比如视频的名称，我可以看到它们有下划线，测试表明没有任何元素覆盖iframe和拦截事件

---

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

我自己刚刚亲身体验过这一点，我想为你写下这篇文章而加上我的荣誉。你的问题，即使没有答案，也为我指明了正确的方向

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

type=“search”

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

将这个看似无害、无关的输入类型从

search

更改为

text

立即解决了这个问题

---

莫名其妙。

他已经清楚地解释了上面的答案-阅读帖子…我会将此作为iOS错误提交，以便他们可以在出现错误时进行调查。如果没有更多信息或链接，这几乎不可能“回答”，但对我来说，这听起来像是一个元素坐在

视频

元素的上方。因此，点击侧面可以让它开始播放，但中间不能。Sphvn，如果你仔细阅读这个问题，你会看到我在那里也包含了一个答案，并将其张贴在这里，以防其他人遇到同样的问题。在你第二次点击播放按钮后，视频会播放吗？我在iOS 7上也有类似的错误：