node.js - YouTube 嵌入无法在 Node + React 上运行

Question

在 node+react app (LINK) 中，我有一个页面，我必须在其中显示不同的视频，这些视频的参数取自 .json 副本

数据 JSON:

        {
            "content": {
                "url": "https://www.youtube.com/embed/tE3_NyCs90I?rel=0&showinfo=0"
            }
        }

react 导出:

export default props => (
  <section className="video">
    <iframe className="videoIFrame" src={props.content.url} frameBorder="0" allowFullScreen></iframe>
  </section>
)

页面源组成正确，但视频嵌入无法正确加载，我只能看到静态图像和播放按钮，但当我悬停或单击它时没有任何反应。

<section class="video">
    <iframe class="videoIFrame" src="https://www.youtube.com/embed/tE3_NyCs90I?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>

在控制台中，我看到以下错误:

> Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.

> POST https://www.youtube.com/youtubei/v1/log_interaction? alt=json&key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8 401 ()

到目前为止我尝试过的:

• 安装 react-youtube 并用预制组件替换纯 html 渲染。同样的错误。

• 尝试更改视频，以免重复播放相同的视频。没有解决。

• 检查了以下问题，但没有运气

• Youtube embed not working - 不相关。

• Youtube Embed code is not working in HTML - 不相关。

• Youtube embed not working in Chrome - 不起作用。

• Youtube auto-embed not working in post - 不相关。

• YouTube embedded player throwing 401 errors - 不相关，我认为我不一定需要嵌入自己 channel 中的视频。

• Error parsing header X-XSS-Protection - Google Chrome - 不相关，这意味着所有嵌入 YouTube 视频的网站在我的电脑上都会遇到相同的问题。我还尝试了 Safari、Firefox 和 IE，也遇到了同样的问题，尽管 IE 由于某种原因没有显示控制台错误。

我没有选择，有人能给我一些建议吗？

预先感谢您的回复。祝你今天过得愉快! :)

Answer 1

误报，这只是一个流氓 CSS z-index 掩盖了整个视频部分。

抱歉打扰大家了。