ipad - YouTube html5player 无法在 iPad Safari 上播放；协议(protocol)和端口异常

Question

我有一个奇怪的错误，只发生在 iPad 的 safari 上。我在页面中添加了一个 youtube iframe 元素，看起来像这样。

<iframe width="560" height="315" src="http://www.youtube.com/embed/dDAB35SYIr0?rel=0" frameborder="0" allowfullscreen></iframe>

如您所见，我说来源是http，我的网站也是http。现在在 iPad Safari 上，我收到此控制台错误消息

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://example.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

我认为这很奇怪，原因有两个
1.我特意说“使用http”
2.它适用于其他设备

现在，如果我将协议(protocol)更改为 https(现在我也在 https 站点上)并尝试此操作，我会收到此错误

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://www.example.com". Protocols, domains, and ports must match.

所有错误都引用 html5player.js 文件。

我该如何解决这个问题？
谢谢你的帮助

Answer 1

好的，所以 iPad 上的 webkit 似乎有一个错误，一个奇怪的错误。我在这里读到了-> https://tmpworldwide.github.io/bugs/ios-tappy-bug.html

我会引用一点

Applying the :active pseudo-class to a universal selector (*) and including a property of -webkit-tap-highlight-color seems to be the culprit.

*:active { -webkit-tap-highlight-color: tomato; }

Now, here is the strange part. The bug is only triggered when the above CSS block is present and there is an input element present on the page with a type attribute value of "search". I know, crazy, right? Another oddity here is that when you apply focus to the search input, type something in, and then attempt to play video, it will then work.

现在的解决方案是将输入类型=“搜索”更改为输入类型=“文本”。