react-youtube-lite

react-youtube-lite

A responsive react component to render YouTube videos in a lazyload mode to get a high speed load website.

Demo: https://codesandbox.io/s/react-youtube-lite-uikk9n?file=/src/App.js

📊 Comparison

YouTube iframe	react-youtube-lite

👨‍💻 Installation

npm:

npm add react-youtube-lite

yarn:

yarn add react-youtube-lite

pnpm:

pnpm add react-youtube-lite

📚 Usage

import { YouTubeLite } from 'react-youtube-lite';

// Full URL
const App = () => {
  return (
    <YouTubeLite
      url="https://www.youtube.com/watch?v=DVQTGidS1yk"
      title='React and the Music Industry | Jameyel "J. Dash" Johnson'
    />
  );
};

// Short URL
const App = () => {
  return (
    <YouTubeLite url="https://youtu.be/DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' />
  );
};

// ID
const App = () => {
  return <YouTubeLite url="DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' />;
};

🎨 Use your own styles

Since with use Stitches to style the component you can make use of any of the properties that already supported by them.

With the usage of Stitches we are able not only to put basic styles, we can also use media queries, pseudoelements and more.

This only apply to the main container, if you want to override styles for the iframe element you can do it like this 👇

📝 Props

• url: YouTube video URL or ID
• adNetwork: Preconnect the adnetwork of Google. Default is false.
• aspectRatio: Aspect ratio of the video, you can pass any ratio using numbers. Default is 16/9.
• css: We use Stitches to style the component, you can pass your own CSS values.
• customThumbnail: Custom thumbnail URL instead of the default one.
• iframeProps: Props to pass to the iframe element.
• noCookie: Connect to YouTube via the Privacy-Enhanced Mode. Default is true.
• playerParameters: Parameters to pass to the YouTube player. Full list of parameters can be found here.
• playlist: If the video URL contains a playlist.
• poster: The different quality to show the poster. Default is hqdefault.
• title: Is used for a11y and we must always provide a title. Default is React YouTube Lite.

Also you can pass any other props since it will render a div element.

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page. You can also take a look at the contributing guide.

License

MIT License Copyright (c) 2020 Daniel Esteves.