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` |
-| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-|  |  |
+| YouTube iframe | `react-youtube-lite` |
+| ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+|  |  |
|  |  |
-
## 👨💻 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
- `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.
*