YouTube Iframe API - 视频有时无法通过自定义控件播放，而是刷新视频

Question

有点奇怪 - 我第一次使用YouTube iFrame API，为客户网站构建皮肤。

我已经按照Google / YouTube（https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API）提供的代码示例进行了操作。

问题是，当点击播放按钮时，它会调用pl​​ayer.playVideo（），在某些情况下它会播放，但大多数情况下，它只是刷新视频而控制台中没有记录错误。视频将淡化为黑色，就像它即将播放一样，但它会通过播放按钮淡化为视频“海报”。

你可以在这里查看整个代码 - https://codepen.io/james-morton/pen/BEZGvm

我尝试了各种不同的东西，比如使用：

function onYouTubePlayerAPIReady() {

..我按照其他例子尝试了这个无济于事

window.onYouTubePlayerAPIReady = function() {

同样，要清楚，控件有时可以工作，有时它不会 - 相同的机器，相同的浏览器，相同的视频 - 我尝试过其他视频和相同的结果。这有点无效，因为它有时会起作用。

有任何想法吗？

编辑：

使用以下进一步调试后：

function onPlayerStateChange(event){
  console.log('State Change: ' + event.data);
}

我可以看到，当它没有加载时，播放器的状态从-1（Unstarted）变为3（缓冲），然后在单击播放按钮时返回-1（Unstarted）。

Answer 1

事实证明问题似乎与CodePen有关 - 将所有代码转移到我自己的环境中，它可以完美地工作，没有通过控件的播放问题。

在回顾了使用非常类似设置的https://css-tricks.com/play-button-youtube-and-vimeo-api/之后，问题很容易在CodePen上复制，并且评论（从2014年开始一直回溯）描述了我遇到的问题。

希望这对发现这一点的其他人有用。

Answer 2

这是一个奇怪的！我没有完全'解决'它，但我有一些反馈。在运行你的代码时，起初我根本无法播放它（通过中间的'YT'播放按钮或自定义播放按钮），但当我使用你的'ff'按钮时（当它没有时）但是开始玩了，有明显迹象表明它已被激活。我将z-index中的yt-player从2改为-2然后能够使用中间按钮开始游戏。在最初的游戏之后，我使用自定义按钮没有问题（暂停/播放工作正常） - 我刷新并尝试多次，每次都成功。

一个大问题是使用自定义播放按钮开始第一个视频播放。您可以自动启动它（可能有延迟？）以避免必须使用中间按钮？我确实检查了按钮的宽度（看看是否填充/重叠）可能会影响播放按钮，但没有找到任何东西。我注意到，当我播放视频时，它从它的初始位置稍微上升，所以我稍微调整了css（只是一个非常轻微的调整）。这是我的codepen link（它与你的没有什么不同......）我希望这有助于......即使有点。