feat(params) Allow for prefetching url (#70)

* feat(params) Allow for prefetching url

Adds additional parameter  to allow prefetch being used for the rel attribute. Also adds a syntax correction.

* Update README.md  with rel prop

Author: LichLord91

README.md

@@ -257,6 +257,7 @@ The most minimalist implementation requires two props: `id` from the YouTube you
 | playlist | boolean |    Use `true` when your id be from a playlist |
 | playlistCoverId | string | The ids for playlists did not bring the cover in a pattern to render so you'll need pick up a video from the playlist (or in fact, whatever id) and use to render the cover. There's a programmatic way to get the cover from YouTube API v3 but the aim of this component is do not make any another call and reduce requests and bandwidth usage as much as possible  |
 | poster | string. One of `default` `mqdefault`  `hqdefault` `sddefault` `maxresdefault` |   Defines the image size to call on first render as poster image. See: [https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api](https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api) |
+| rel | string |   Default `preload`. allows for prefetch or preload of the link url |
 | webp | boolean |   Default `false`. When set, uses the WebP format for poster images |
 | wrapperClass | string |   Pass the string class that wraps the iFrame |
 

src/lib/index.tsx

@@ -28,6 +28,7 @@ interface LiteYouTube {
   onIframeAdded?: () => void
   muted?: boolean,
   thumbnail?: string,
+  rel?: string,
 }
 
 export default function LiteYouTubeEmbed(props: LiteYouTube) {
@@ -41,7 +42,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
   const mutedImp = props.muted ? "&mute=1" : "";
   const announceWatch = props.announce || "Watch";
   const format = props.webp ? 'webp' : 'jpg';
-  const vi = props.webp ? 'vi_webp' : 'vi'
+  const vi = props.webp ? 'vi_webp' : 'vi';
   const posterUrl = props.thumbnail || (!props.playlist 
     ? `https://i.ytimg.com/${vi}/${videoId}/${posterImp}.${format}` 
     : `https://i.ytimg.com/${vi}/${videoPlaylisCovertId}/${posterImp}.${format}`);
@@ -65,6 +66,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
   const playerClassImp = props.playerClass || "lty-playbtn";
   const wrapperClassImp = props.wrapperClass || "yt-lite";
   const onIframeAdded = props.onIframeAdded || function () { };
+  const rel = props.rel ? 'prefetch' : 'preload';
 
   const warmConnections = () => {
     if (preconnected) return;
@@ -85,7 +87,7 @@ export default function LiteYouTubeEmbed(props: LiteYouTube) {
   return (
     <>
       <link
-        rel="preload"
+        rel={rel}
         href={posterUrl}
         as="image"
       />