React component version of [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) scaffolded with tsdx, which focus on visual performance, rendering just like the real thing but much faster.
npm install react-lite-yt-embed
!Download

react-lite-yt-embed
``shell`
$ yarn add react-lite-yt-embed
or
`shell`
$ npm install react-lite-yt-embed
If you use some browsers that not totally support WebP, for example, Safari, 'react-lite-yt-embed' will fallback the image to jpg automatically.
You can see WebP browser support here.
`javascript
import { LiteYoutubeEmbed } from 'react-lite-yt-embed';
// In your react component
<>
{/ You can add more props, see the description below. /}
{/ You can also give the iframe an outer container /}
>
`
| props | required | default value | Type | Description |
|-------------------|----------|-----------------|-----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------|
| id | true | none | string | The unique id of the youtube video |boolean
| defaultPlay | false | false | | Set defaultPlay as true will directly show youtube iframe |boolean
| isPlaylist | false | false | | If you want to play playlist, set this as true and pass the playlist id |boolean
| noCookie | false | true | | Use "https://www.youtube-nocookie.com" as path or "https://www.youtube.com" |boolean
| mute | false | true | | Set the video is mute or not. |Object
| params | false | {} | | Query string params (autoplay and mute are default query string, you do not have to set them), the value have to be a string type. |boolean
| isMobile | false | false | | Use in mobile device or not. |boolean
| mobileResolution | false | 'hqdefault' | 'hqdefault' \| 'sddefault' \| 'maxresdefault' | You can specify the resolution of the thumbnail image on the phone (default is hqdefault, which is a lower resolution). |
| desktopResolution | false | 'maxresdefault' | 'hqdefault' \| 'sddefault' \| 'maxresdefault' | You can specify the resolution of the thumbnail image on the desktop (default is maxresdefault, which is the highest resolution). |
| lazyImage | false | false | | If true, set the img loading attribute to 'lazy', default is undefined. |string
| imageAltText | false | "YouTube's thumbnail for this video." | | You can specify an alternative text description for the thumbnail image for accessibility purposes. |string` | You can specify a title for the iframe containing the video for accessibility purposes. |
| iframeTitle | false | "YouTube video." |