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

您可以使用反应组件react-youtube

Answer 2

您可以仅使用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's URL。

作为旁注，我创建了一个免费系列文章，介绍如何在Youtube中构建react。您可以在此处查看演示：https://youtu.be/E7wJTI-1dvQ

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

2 个答案: