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/
The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.
Embed a video or playlistOn a computer, go to the YouTube video or playlist you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.
You can just use an iframe
element to achieve this. There is no need to depend on yet another npm
package.
<iframe src='https://www.youtube.com/embed/E7wJTI-1dvQ'
frameborder='0'
allow='autoplay; encrypted-media'
allowfullscreen
title='video'
/>
By the way, if you are wondering why the embed URL
looks like it looks, you can just go to an arbitrary Youtube video
, click on Share
and then you immediately see that we just need to append /embed/:videoId
Youtube's
base URL
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With