React.js Embed Youtube IFrame Videos Using react-youtube and Youtube IFrame API Full Tutorial with Examples

 

Welcome folks today in this post we will be looking at react-youtube library for embedding youtube videos as iframes and using youtube iframe api. All the source code examples are given below.

 

 

#  Installation

 

 

npm i react-youtube

 

 

 

Usage

 

 

 

import React from 'react';
import YouTube from 'react-youtube';



export default function App() {

  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
    },
  };

  return (
 
    <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} />
  );
}

 

 

 

 

 

 

 

 

Default Options

 

 

 

<YouTube
  videoId={string}                  // defaults -> null
  id={string}                       // defaults -> null
  className={string}                // defaults -> null
  containerClassName={string}       // defaults -> ''
  opts={obj}                        // defaults -> {}
  onReady={func}                    // defaults -> noop
  onPlay={func}                     // defaults -> noop
  onPause={func}                    // defaults -> noop
  onEnd={func}                      // defaults -> noop
  onError={func}                    // defaults -> noop
  onStateChange={func}              // defaults -> noop
  onPlaybackRateChange={func}       // defaults -> noop
  onPlaybackQualityChange={func}    // defaults -> noop
/>

 

See also  React Native Tutorial to Save PDF Document to Android/IOS File System and View PDF in PDF Viewer Full Project For Beginners

 

 

Leave a Reply