iframe 和 React.js - 如何将 youtube 视频嵌入到我的应用中

Question

我正在尝试了解如何将 youtube 嵌入到我的应用中。

import React from "react"
import Pageheader from 'react-bootstrap/lib/Pageheader';
import ResponsiveEmbed from 'react-bootstrap/lib/ResponsiveEmbed';
import Grid from 'react-bootstrap/lib/Grid';

export default class Services extends React.Component {
  render() {
    return (
        <div id = "services">
            <Pageheader justified>
                About us
                <small>M2 Consulting is Bringing Small Businesses to the Agile century</small>
                <ResponsiveEmbed a16by9>
                    <embed src="https://youtu.be/uC9VtVnuPD0"/>
                </ResponsiveEmbed>
            </Pageheader>
        </div>
    )
  }
}

这是我目前拥有的。

我尝试了几种不同的方法来正确显示，但发现使用 youtube 中的嵌入代码等方法会产生多个错误。我正在尝试复制这个网站以及它如何显示嵌入视频。

https://moodmap.app/

Answer 1

您可以使用iframe 元素来实现此目的。无需依赖另一个 npm 包。

<iframe src='https://www.youtube.com/embed/E7wJTI-1dvQ'
        frameborder='0'
        allow='autoplay; encrypted-media'
        allowfullscreen
        title='video'
/>

顺便说一句，如果你想知道为什么embed URL 看起来像它，你可以去任意一个Youtube video，点击Share，然后你会立即看到我们只需要附加@987654327 @Youtube's基URL.

Answer 2

你可以使用react组件react-youtube