iframe src 属性在我的 React 应用程序中更改为 data-src答案

【问题标题】：iframe src attribute is changing into data-src in my React applicationiframe src 属性在我的 React 应用程序中更改为 data-src
【发布时间】：2021-02-17 20:17:33
【问题描述】：

在 React 组件中，我有一个 iframe：

<iframe
  css={styles.videoIframe}
  width="853"
  height="480"
  src={embedlink}
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
  title={title}
/>

当我检查 DOM 时，我看到 src 已更改为 data-src？

<iframe width="853" height="480" data-src="http://www.youtube.com/embed/youtube-id-here" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="The title"></iframe>

我没有看到嵌入的 YouTube 视频呈现？可能是因为将属性更改为data-src？

【问题讨论】：

也许您不知道您正在处理的系统的其他部分将其实现为某种用户同意 - 必须 - 给定 - 之前 - youtube-stuff-is-shown

标签： reactjs iframe src

【解决方案1】：

我最终为此使用了无 cookie 嵌入。将我的嵌入变量更改为：

const embedLink = `https://www.youtube-nocookie.com/embed/${youtubeId}`;

另请参阅this 答案。

【讨论】：