当HTML5搜索输入可见时，嵌入的YouTube视频无法在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能够被单击以开始视频播放。在第一次单击之后，无论搜索输入是否显示，所有视频控件都将工作。
回答 1
Stack Overflow用户
发布于 2015-04-21 22:56:19
刚刚亲身体验到了这一点，并想为你写下这篇文章增加我的赞誉。你的问题，即使没有答案，也为我指明了正确的方向。
在我的案例中，这与Youtube无关。我有一个由Drupal在一个大型站点中生成的页面，在该页面中，整个站点的搜索机制使用了一个自动完成的drupal模块，该模块将type="search"作为主输入类型。
在IOS中，用户反映Facebook、Twitter和Google Plus各自的“喜欢”按钮都不起作用，页面中嵌入了一个更大的angular应用程序。他们都使用iframe，而且似乎没有一个人对点击做出反应。
将这个看似无害、无关的输入类型从search更改为text，立即解决了这个问题。
令人费解。
https://stackoverflow.com/questions/19507930
复制相似问题