web-dev-qa-db-ja.com

iframesとReact.js-YouTubeビデオをアプリに埋め込む方法

アプリに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からの埋め込みコードを使用して複数のエラーを作成することがわかりました。このWebサイトを複製して、埋め込みビデオをどのように表示するかを試みています。

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

javascriptreactjsiframeyoutube
7
Michael Holborn

あなたは反応コンポーネントを使うことができます react-youtube

5
Aleš Dostál

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/:videoIdYoutube'sベースURL。

補足として、Youtubeをreactにビルドする方法についての無料シリーズを作成しました。ここでデモを見ることができます： https://youtu.be/E7wJTI-1dvQ

15
productioncoder