diff --git a/README.md b/README.md index 35ae1de..457d3eb 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,11 @@ Demo: https://codesandbox.io/s/react-youtube-lite-uikk9n?file=/src/App.js ## 📊 Comparison -| YouTube iframe | `react-youtube-lite` | -| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -| ![Initial load of youtube iframe](https://user-images.githubusercontent.com/31737273/156228816-f6f80dff-eaba-443e-9834-785cf8b8fe8c.png) | ![Initial load of react-youtube-lite](https://user-images.githubusercontent.com/31737273/156228959-7b3a2c8e-8794-40e7-8a76-3baf72771cb1.png) | +| YouTube iframe | `react-youtube-lite` | +| ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| ![Initial load of youtube iframe](https://user-images.githubusercontent.com/31737273/156228816-f6f80dff-eaba-443e-9834-785cf8b8fe8c.png) | ![Initial load of react-youtube-lite](https://user-images.githubusercontent.com/31737273/156228959-7b3a2c8e-8794-40e7-8a76-3baf72771cb1.png) | | ![Network fetch from youtube iframe](https://user-images.githubusercontent.com/31737273/156229073-177dd07e-02d2-473e-8416-21d6e10e3179.png) | ![Network fetch from react-youtube-lite](https://user-images.githubusercontent.com/31737273/156229143-a8740655-9628-437c-b86b-de5462456e23.png) | - ## 👨‍💻 Installation npm: @@ -44,8 +43,8 @@ const App = () => { url="https://www.youtube.com/watch?v=DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' /> - ) -} + ); +}; // Short URL const App = () => { @@ -54,18 +53,13 @@ const App = () => { url="https://youtu.be/DVQTGidS1yk" title='React and the Music Industry | Jameyel "J. Dash" Johnson' /> - ) -} + ); +}; // ID const App = () => { - return ( - - ) -} + return ; +}; ``` ## 🎨 Use your own styles @@ -78,11 +72,10 @@ This only apply to the main container, if you want to override styles for the if ![Props example of the css prop inside the frameProps attribute](https://user-images.githubusercontent.com/31737273/156233437-d5f89019-3dc2-45c8-94e3-c0ba2f8a61d5.png) - - ## 📝 Props - `url`: YouTube video URL or ID +- `adNetwork`: Preconnect the adnetwork of Google. Default is `false`. - `aspectRatio`: Aspect ratio of the video, you can pass any ratio using numbers. Default is `16/9`. - `css`: We use Stitches to style the component, you can pass your own CSS values. - `customThumbnail`: Custom thumbnail URL instead of the default one. diff --git a/src/react-youtube-lite/index.tsx b/src/react-youtube-lite/index.tsx index 89326c1..5d2244c 100644 --- a/src/react-youtube-lite/index.tsx +++ b/src/react-youtube-lite/index.tsx @@ -11,6 +11,7 @@ import type { ReactYouTubeLiteProps } from '../types'; function RenderReactYouTubeLite( { url, + adNetwork, aspectRatio = 16 / 9, css, customThumbnail, @@ -42,8 +43,10 @@ function RenderReactYouTubeLite( addPrefetch('preconnect', 'https://www.google.com'); // These ad-related domains may or may not be on the critical path. Domain-specific throttling could be used to confirm. - addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); - addPrefetch('preconnect', 'https://static.doubleclick.net'); + if (adNetwork) { + addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); + addPrefetch('preconnect', 'https://static.doubleclick.net'); + } setPreconnected(true); }; diff --git a/src/types/index.ts b/src/types/index.ts index e7d3778..5e5b57f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -17,6 +17,12 @@ interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> { * This can be either an url to a video or a video ID. */ url: string; + /** + * Preconnect or not doubleclick ads, this is the adnetwork from Google. + * + * @default false + */ + adNetwork?: boolean; /** * The aspect ratio of the video. *