ios - 如何通过单击播放按钮而不是嵌入来触发 YouTube 视频在 iOS 上的浏览​​器中播放？

Question

在我的网站上，我想让用户在不离开页面的情况下观看嵌入的 YouTube 视频，但我不希望在点击之前让不那么风格的 YouTube 嵌入可见。

这在桌面上完全可行，因为您可以使用 YouTube JavaScript API 来触发嵌入播放，但在 iOS 上，播放器的编程触发播放被阻止。那么如何在 iOS 上做到这一点呢？

Answer 1

在考虑这个问题时，我认为另一种方法是设置一个不透明且有样式的图层，但您可以单击它。这意味着用户认为他们正在单击一个漂亮的按钮，而实际上他们只是单击嵌入来播放。

原来有一种方法可以做到这一点，使用花哨的(非官方的)CSS pointer-events属性(property)!将此设置为 none意味着点击不会注册，而是直接穿过元素到达它后面的任何东西。在这种情况下，YouTube 嵌入 iframe。支持iOS 6+。

这是 JSFiddle它的工作。

请注意，这适用于 iOS(可能还有 Android)——它利用了视频在开始播放时会自动全屏显示的行为。如果您在桌面上观看此内容，则覆盖仍然......覆盖。

有一些更多的抛光要做到这一点，以使其 schmick:

处理初始点击并更改 UI，以便他们立即知道视频正在开始。也许隐藏覆盖，淡化它，或将其更改为简单地表示“正在加载...”

完成后，通过重新创建 iframe

来重置视频

你可以用这种技术做一些棘手的事情，例如有一个由小按钮覆盖的小播放器 iframe。仍然要全屏显示，所以它会正常工作。

但无论如何，你去 - 在 iOS 上播放 YouTube 视频的概念证明，而用户不知道他们点击了嵌入。