Iframes and React.js - How to embed a youtube video into my app

Question

I'm trying to understand how to include a youtube embed into my app.

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

This is what I have at the moment.

I've tried a few different methods of getting to properly display but have found using, for example, the embed code from youtube to create multiple errors. I'm trying to replicate this website and how it displays its embedded video.

https://moodmap.app/

Answer 1

You can use react component react-youtube

Answer 2

If your app downloads a list of videos and you want to play the video upon clicking on the video card:

 {videos.map((video, idx) => {
          return (
            <Link href={`/video/${video.id}`}>
              <a>
                <Card
                  id={idx}
                  imgUrl={video.imgUrl}
                  size={size}
                  shouldScale={shouldScale}
                />
              </a>
            </Link>
          );
        })}

When clicked, you would be redirected to /video/${video.id}. in this page you get the dynamic video.id

  const router = useRouter();
  const videoId = router.query.videoId;

Play the video:

 <iframe
        id="ytplayer"
        className={}
        type="text/html"
        width="100%"
        height="360"
        src={`https://www.youtube.com/embed/${videoId}?autoplay=0&origin=http://example.com&controls=0&rel=1`}
        frameBorder="0"
      ></iframe>