npm youtube-react - JavaScript

If you are looking to integrate YouTube videos on your website or web app written in JavaScript, then npm youtube-react is a great package to consider.

Overview

npm youtube-react is a react component package that provides a simple and easy-to-use interface for embedding YouTube videos. The package utilizes YouTube’s iFrame API to embed videos, making it easy to customize player options and handle player events.

Key Features

• Simple and quick installation using npm.
• Flexible customization options using React component props.
• Provides a player API to handle player events and methods.
• Supports lazy-load and responsive design.
• Works seamlessly with popular JS build tools like Webpack and Babel.

Installation

You can install the package using npm with the following command:

npm install youtube-react

Usage

To use the package, you first need to import the component into your file. You can then use the component with a simple JSX tag and pass the necessary props to customize the player.

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

const App = () => {
  return (
    <YouTube
      video="dQw4w9WgXcQ"
      autoplay
      muted
    />
  );
};

export default App;

Customization

The package provides a wide range of props that can be used to customize the player such as video, autoplay, muted, playerVars and onReady . You can also use the player API to perform actions like starting and stopping the video.

import React, { useState } from 'react';
import { YouTube, PlayButton, PauseButton } from 'youtube-react';

const App = () => {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <>
    <YouTube
      video="dQw4w9WgXcQ"
      onReady={(event) => {
          // Access to player in all event handlers via event.target
          event.target.pauseVideo();
      }}
    />
    {isPlaying 
      ? <PauseButton onClick={() => setIsPlaying(false)} /> 
      : <PlayButton onClick={() => setIsPlaying(true)} />
    }
    </>
  );
};

export default App;

Conclusion

npm youtube-react is a great package to easily embed YouTube videos on your web app. With its flexible customization options and easy-to-use player API, you can create a fully customized player that meets your web development needs.