README to documentation synchro

apivideo · Nov 21, 2023 · ea1978a · ea1978a
1 parent 735b93d
commit ea1978a
Show file tree

Hide file tree

Showing 2 changed files with 305 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@
   - [Properties](#properties)
     - [Settings](#settings)
       - [Controls](#controls)
+      - [Player theme](#player-theme)
       - [Ads](#ads)
       - [Responsiveness](#responsiveness)
     - [Callbacks](#callbacks)
@@ -33,7 +34,7 @@
 ---
 title: api.video React Player component
 meta:
-description: The official api.video React Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
+  description: The official api.video React Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
 ---
 
 # api.video React Player component
@@ -101,7 +102,7 @@ The following properties are used to configure the player. The value of each of
 | responsive          | no        | boolean                                                                                          | Weither if the player shoulb be responsive. See below [responsiveness](#responsiveness)                                         | false     |
 | videoStyleObjectFit | no        | "contain" \| "cover" \| "fill" \| "none" \| "scale-down"                                         | The `object-fit` CSS value of the video tag                                                                                     | undefined |
 | videoStyleTransform | no        | string                                                                                           | The `transform` CSS value of the video tag (examples: "rotateY(180deg)")                                                        | undefined |
-| ads                 | no        | {adTagUrl: string}                                                                               | see below [ads](#ads)                                                                                                           |
+| ads                 | no        | {adTagUrl: string}                                                                               | see below [ads](#ads)                                                                                                           |  |
 
 ##### Controls
 
@@ -111,22 +112,23 @@ The `controls` property let you decide wich controls should be displayed on the
 {% raw %}
 </documentation_only>-->
 
-Examples
+> Examples
+> 
 > ```tsx
-{/* default: all controls are displayed */}
-<ApiVideoPlayer 
- video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
-
-{/* all controls hidden (equivalent to chromeless=true) */}
-<ApiVideoPlayer 
-  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
-  controls={[]} />
-
-{ /* only the play button & the unmute one are displayed */}
-<ApiVideoPlayer 
-  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
-  controls={["play", "unmute"]}/>
-```
+> {/* default: all controls are displayed */}
+> <ApiVideoPlayer 
+>  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
+> 
+> {/* all controls hidden (equivalent to chromeless=true) */}
+> <ApiVideoPlayer 
+>   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+>   controls={[]} />
+> 
+> { /* only the play button & the unmute one are displayed */}
+> <ApiVideoPlayer 
+>   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+>   controls={["play", "unmute"]}/>
+> ```
 
 <!--<documentation_only>
 {% endraw %}
@@ -136,17 +138,17 @@ Examples
 
 The `theme` property let you customize the color of some elements on the player. Here is the list of customizable elements: `text`, `link`, `linkHover`, `trackPlayed`, `trackUnplayed`, `trackBackground`, `backgroundTop`, `backgroundBottom`, `backgroundText`, `linkActive`.
 
-Example
-
-```tsx
-{ /* display the text in blue and the progress bar in red */}
-<ApiVideoPlayer
-  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
-  theme={{
-    trackPlayed: "#FF0000",
-    text: "blue"
-  }}/>
-```
+> Example
+> 
+> ```tsx
+> { /* display the text in blue and the progress bar in red */}
+> <ApiVideoPlayer
+>   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+>   theme={{
+>     trackPlayed: "#FF0000",
+>     text: "blue"
+>   }}/>
+> ```
 
 
 ##### Ads