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的嵌入代码来创建多个错误。我正在尝试复制此网站及其显示嵌入视频的方式。

http://www.milkbardigital.com.au/

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，然后立即看到我们只需要追加/embed/:videoId Youtube'sbase即可URL。

附带说明一下，我创建了一个免费的系列文章，介绍如何构建Youtubein react。您可以在此处查看演示：https : //youtu.be/E7wJTI-1dvQ

Answer 2

您可以使用 react 组件react-youtube