reactjs - 如何在React中加载和播放Youtube视频

Question

目前，我正在尝试构建一个应包含YouTube链接"https:\/\/www.youtube.com\/watch?v=IEDEtZ4UVtI"的应用。因此，第一次尝试运行此命令是O <video className="video" src="https:\/\/www.youtube.com\/watch?v=IEDEtZ4UVtI"></video>，但是您可能会发现它无法正常运行。还有哪些其他选择。请注意，我的API中没有任何嵌入式链接，因此您在第一个YouTube链接中仅看到我应该使用的链接。

Answer 1

以前可以将Youtube视频嵌入如下:

<video controls="true">
    <source src="www.youtube.com/watch?v=IEDEtZ4UVtI" type="video/mp4">
</video>

...但现在不再。

唯一的选择是使用通常的iframe嵌入，它与React应用程序很好地配合。您只需要使用链接中的Youtube视频ID，并将其用于嵌入链接 https://youtube.com/embed/${youtubeID}?autoplay=0中即可。

const [youtubeID] = useState('IEDEtZ4UVtI')

[...]

<iframe className='video'
        title='Youtube player'
        sandbox='allow-same-origin allow-forms allow-popups allow-scripts allow-presentation'
        src={`https://youtube.com/embed/${youtubeID}?autoplay=0`}>
</iframe>