为什么我的 Youtube 视频没有显示在带有 Next.js 和 UIkit 的 iFrame 上？

Question

我在 Next.js 组件中放置了一个 iFrame 标签。在我的网站上，我可以看到框架，但上面写着“Youtube 不授权此连接”。怎么了？

这是我的代码：

            <iframe 
                src="https://www.youtube.com/watch?v=E8gmARGvPlI" 
                width="1920" 
                height="1080" 
                frameBorder="0" 
                allowFullScreen 
                uk-responsive 
                uk-video="automute: true">
            </iframe>

Answer 1

如果您想在 iframe 中播放 YouTube 视频，您需要使用他们的 API 来实现。您可以在此处了解有关如何执行此操作的更多信息 - https://developers.google.com/youtube/iframe_api_reference

如果您只是想嵌入视频而不需要外部控制视频，您可以直接嵌入它。更多关于嵌入的信息 - https://support.google.com/youtube/answer/171780?hl=en

Answer 2

您使用 youtube 获取视频 ID api

<iframe
          id="ytplayer"
          className={}
          type="text/html"
          width="100%"
          height="360"
          src={`https://www.youtube.com/embed/${videoId}?autoplay=0&origin=http://example.com&controls=0&rel=1`}
          frameborder="0"
        ></iframe>

为什么我的 Youtube 视频没有显示在带有 Next.js 和 UIkit 的 iFrame 上？

Why is my Youtube video not showing on iFrame with Next.js and UIkit?

iframe

uikit

reactjs

next.js