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

Added custom thumbnail capability #66

Merged
merged 1 commit into from
Feb 22, 2022
Merged

Added custom thumbnail capability #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 16 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
</a>
</p>


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](https://danestves.github.io/react-youtube-lite/?path=/story/component-react-youtube-lite--default)
Expand Down Expand Up @@ -56,24 +57,25 @@ const App = () => {

## 🔗 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 |
| 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!<br />Feel free to check [issues page](https://github.com/danestves/react-youtube-lite/issues). You can also take a look at the [contributing guide](https://github.com/danestves/react-youtube-lite/blob/main/CONTRIBUTING.md).

## License

[MIT License](LICENSE.md) Copyright (c) 2020 [Daniel Esteves](https://danestves.com/).
[MIT License](LICENSE.md) Copyright (c) 2020 [Daniel Esteves](https://danestves.com/).
15 changes: 13 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,12 @@ export interface Props {
* @default "lty-playbt"
*/
activatedClass?: string;
/**
* A custom thumbnail image url to show instead of the original youtube thumbnail
*
* @default false
*/
customThumbnail?: string;
/**
* Default classes to put iframe responsive
*
Expand Down Expand Up @@ -100,7 +106,8 @@ export interface Props {
* @param url - The URL of the video (we take care of )
*/
export function getYoutubeId(url: string): string {
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
const regExp =
/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
const match = url.match(regExp);

return match && match[7].length === 11 ? match[7] : '';
Expand All @@ -116,6 +123,7 @@ export const ReactYouTubeLite = ({
poster = 'hqdefault',
title = 'React YouTube Lite',
noCookie = false,
customThumbnail = '',
activatedClass = 'lyt-activated',
iframeClass = 'embed-responsive-item',
playerClass = 'lty-playbtn',
Expand All @@ -126,7 +134,10 @@ export const ReactYouTubeLite = ({
const [iframe, setIframe] = React.useState(false);
const videoId = encodeURIComponent(getYoutubeId(url));
const videoTitle = title;
const posterUrl = `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`;
const posterUrl =
customThumbnail && typeof customThumbnail === 'string'
? customThumbnail
: `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`;
const ytUrl = noCookie
? 'https://www.youtube-nocookie.com'
: 'https://www.youtube.com';
Expand Down