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.

You can see a demo here

⏳ Installation

# npm
npm install react-youtube-lite

# yarn
yarn add react-youtube-lite

✏️ Usage

// index.tsx
import * as React from 'react';
import { ReactYouTubeLite } from 'react-youtube-lite';

const App = (): JSX.Element => {
  return <ReactYouTubeLite url="https://www.youtube.com/watch?v=DVQTGidS1yk" />;
};

// index.jsx
import React from 'react';
import { ReactYouTubeLite } from 'react-youtube-lite';

const App = () => {
  return <ReactYouTubeLite url="https://www.youtube.com/watch?v=DVQTGidS1yk" />;
};

🔗 Props

Name	Type	Default	Description	Re quired
adNetwork	boolean	true	If https://static.doubleclick.net is enabled or not	No
url	string		The URL of the video in any format like youtube.com or youtu.be we take care of get the ID of the video	Yes
playlist	boolean	false	If the video URL contains a playlist or not	No
poster	string	hqdefault	The different quality to show the poster see: https://developers.google.com/youtube/v3/docs/thumbnails for more information. Available options: maxresdefault, 0, 1, 2, 3, default, hqdefault, mqdefault, sddefault	No
title	string	React YouTube Lite	The data-title to insert in the iframe	No
noCookie	boolean	false	If you use GDPR and don't want YouTube cookies enable this option	No
activatedClass	string	lty-playbt	The class used to hide the elements when the iframe is already renderer	No
customThumbnail	string		A custom thumbnail image url to show instead of the original youtube thumbnail	No
iframeClass	string	embed-reponsive-item	Default classes to put iframe responsive	No
playerClass	string	lty-playbtn	Class for youtube play button	No
wrapperClass	string	ryt-lite embed-responsive	Default classes to put container responsive	No
aspectRatio	string	aspect-ratio-16/9	Implements a padding-bottom to generate the size of the iframe. Available options: aspect-ratio-none, aspect-ratio-square, aspect-ratio-16/9, aspect-ratio-4/3, aspect-ratio-21/9	No

🤝 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.