react-youtube-playlist

A react component for displaying the contents of a user's YouTube playlist.

Usage no npm install needed!

<script type="module">
  import reactYoutubePlaylist from 'https://cdn.skypack.dev/react-youtube-playlist';
</script>

README

Usage is as follows:

import YouTubePlaylist from 'react-youtube-playlist';
import 'react-youtube-playlist/dist/styles'

const App = () => {
  return (
    <YouTubePlaylist
      width={'85%'}
      height={390}
      api_key='YourGoogleApiKey'
      playlist_id='YourYoutubePlaylistID'
      show_thumbnails
    />
  )
}

Available Props
api_key String : Your Google API key
playlist_id String : Your YouTube playlist ID
width String | Number : Can be a percent or number (pixels)
height String | Number : Can be a percent or number (pixels)
show_thumbnails Bool : Set to false if you don't want the thumbnail images
container_class String : A class name for the containing DOM node
iframe_container_class String : A class name for the iframe container DOM node
frame_border Number : iframe border size
scrolling Bool : Enable/Disable iframe scrolling 
<YouTubePlaylist
  api_key={String}
  width={300}
  height={400}
  iframe_style={''}
  show_thumbnails={true}
  iframe_container_class={''}
  video_list_container_class={''}
/>

Note : You must include bootstrap css in your project for some of the UI in this component to work.