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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 /> |
