web-dev-qa-db-fra.com

Iframes et React.js - Comment intégrer une vidéo youtube dans mon application

J'essaie de comprendre comment inclure une intégration YouTube dans mon application.

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>
    )
  }
}

C'est ce que j'ai en ce moment.

J'ai essayé différentes méthodes pour afficher correctement, mais j'ai trouvé en utilisant, par exemple, le code d'intégration de YouTube pour créer plusieurs erreurs. J'essaie de reproduire ce site Web et la façon dont il affiche la vidéo intégrée.

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

javascriptreactjsiframeyoutube
7
Michael Holborn

Vous pouvez utiliser le composant react react-youtube

5
Aleš Dostál

Vous pouvez simplement utiliser un élément iframe pour y parvenir. Il n'est pas nécessaire de dépendre d'un autre paquet npm.

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

Au fait, si vous vous demandez pourquoi le embed URL on dirait que ça a l'air, vous pouvez simplement aller dans un arbitraire Youtube video, cliquez sur Share et vous voyez immédiatement que nous avons juste besoin d'ajouter /embed/:videoIdYoutube's base URL.

En remarque, j'ai créé une série gratuite sur la façon de construire Youtube dans react. Vous pouvez voir la démo ici: https://youtu.be/E7wJTI-1dvQ

15
productioncoder