Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
148
rated 0 times [  150] [ 2]  / answers: 1 / hits: 52888  / 7 Years ago, fri, june 23, 2017, 12:00:00

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/


More From » reactjs

 Answers
8

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.


[#57333] Wednesday, June 21, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dylondaytond

Total Points: 92
Total Questions: 88
Total Answers: 96

Location: China
Member since Fri, Jan 15, 2021
3 Years ago
dylondaytond questions
Tue, Jun 22, 21, 00:00, 3 Years ago
Thu, May 7, 20, 00:00, 4 Years ago
;