Iframes and React.js - How to embed a youtube video into my app
42,867
Solution 1
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
.
Solution 2
You can use react component react-youtube
Related videos on Youtube
Comments
-
LeCoda almost 2 years
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.
-
LeCoda almost 7 yearsBrilliant. Now how would I integrate it with this code?
-
Kazim Zaidi over 4 yearsgithub.com/CookPete/react-player works with many different providers and provides responsive styling.
-
Ben Butterworth almost 4 yearsSo the only difference between the HTML YouTube gives you when you press 'share', is the capitalisation of
allowFullScreen
andframeBorder
. Fix that, and you're done. -
Jovylle about 3 yearsHello there, youtuber.
-
Patrick Michaelsen almost 3 yearsone change I needed:
export const YoutubeEmbed = (embedId) => embedId && ( <iframe ... />);
-
Patrick Michaelsen almost 3 yearsjk that didn't fix my problem. for some reason it only works when I hard code the embedId. It's trying to fetch
embed/[Object object]
-
Patrick Michaelsen almost 3 yearsFor completenes sake, turns out it's a problem with my code that generates the
embedId
. I wish you could edit comments so I didn't have to triple post, but alas.