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

Commit

Permalink
Merge pull request #66 from gabrielelpidio/feat/custom-thumbnail
Browse files Browse the repository at this point in the history 
Added custom thumbnail capability
  • Loading branch information
@danestves
danestves authored Feb 22, 2022
2 parents fc8d736 + 5d6375a commit b446a20
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 16 deletions.
30 changes: 16 additions & 14 deletions README.md
View file
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
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

0 comments on commit b446a20

Please sign in to comment.