延迟加载 youtube iframe 但继续关注播放/暂停按钮？答案

【问题标题】：Lazy load youtube iframe but keep focus on play/pause button?延迟加载 youtube iframe 但继续关注播放/暂停按钮？
【发布时间】：2020-10-14 15:15:38
【问题描述】：

什么是延迟加载 youtube 视频的正确方法，但像在常规加载时一样关注播放/暂停按钮（以便残障人士可以使用 space 键暂停视频）？

所有解决方案似乎都没有将注意力集中在视频上，space 向下滚动页面。

这可能吗？

【问题讨论】：

【解决方案1】：

这可能不是最好的方法，因为需要在您的客户端浏览器中启用 JavaScript，但是当 iFrame 像这样加载时，您应该能够运行 JavaScript 函数：

const iframe = document.querySelector('.my-iframe');

iframe.onload = function() {
  onLoad();
}

或者像这样：

<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>

如果您随后编写一个名为 onLoad() 的函数，该函数调用播放按钮上的 .focus() 方法，代码与下一个块中的代码类似，您应该能够将焦点设置到播放按钮。请注意，以下代码块假定播放按钮的 ID 为“play_button”，但这种情况不太可能发生。

funtion onLoad() {
   iframe.contentWindow.document.getElementById("play_button").focus();
};

希望这会有所帮助！

【讨论】：