React.js Project to Embed Youtube Video in IFrame inside Browser Without any Library in Javascript

Post author:admin
Post published:July 14, 2022
Post category:React
Post comments:0 Comments

App.js

import React from "react";
import "./styles.css";
import YoutubeEmbed from "./YoutubeEmbed";

export default function App() {
  return (
    <div className="App">
      <h1>Youtube Embed</h1>
      <YoutubeEmbed embedId="rokGy0huYEA" />
    </div>
  );
}

import React from "react";

import "./styles.css";

import YoutubeEmbed from "./YoutubeEmbed";

export default function App() {

return (

<h1>Youtube Embed</h1>

</div>

);

}

App.css

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.video-responsive {

overflow: hidden;

padding-bottom: 56.25%;

position: relative;

height: 0;

}

.video-responsive iframe {

left: 0;

top: 0;

height: 100%;

width: 100%;

position: absolute;

}

YoutubeEmbed.js

import React from "react";
import PropTypes from "prop-types";

const YoutubeEmbed = ({ embedId }) => (
  <div className="video-responsive">
    <iframe
      width="853"
      height="480"
      src={`https://www.youtube.com/embed/${embedId}`}
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
      title="Embedded youtube"
    />
  </div>
);

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired
};

export default YoutubeEmbed;

import React from "react";

import PropTypes from "prop-types";

const YoutubeEmbed = ({ embedId }) => (

<iframe

width="853"

height="480"

src={`https://www.youtube.com/embed/${embedId}`}

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

title="Embedded youtube"

</div>

);

YoutubeEmbed.propTypes = {

embedId: PropTypes.string.isRequired

};

export default YoutubeEmbed;

Related posts:

You Might Also Like

React Native QRCode or BarCode Scanner Component Tutorial With Example Source Code Full Project For Beginners

React.js Hooks Scientific Calculator Deployed to Vercel Using Javascript Full Project For Beginners

React.js Project to Build Image Cropper in Browser Using react-easy-crop Library & Javascript Full Project For Beginners

Leave a Reply Cancel reply