Skip to content
This repository has been archived by the owner on Apr 27, 2022. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

danestves/react-youtube-lite

Repository files navigation

React YouTube Lite

NPM Version Monthly download on NPM CircleCI License: MIT Twitter: danestves

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

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •