README to documentation synchro

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

Hide file tree

Showing 2 changed files with 311 additions and 31 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,53 +102,57 @@ 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
 
 The `controls` property let you decide wich controls should be displayed on the player. Here is the list of all available controls: `play`, `seekBackward`, `seekForward`, `playbackRate`, `volume`, `fullscreen`, `subtitles`, `chapters`, `pictureInPicture`, `progressBar`, `chromecast`, `download`, `more`.
 <!--<documentation_only>
-
 {% 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 %}
-
 </documentation_only>-->
+
 ##### Player theme
 
 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
+<!--<documentation_only>
+{% raw %}
+</documentation_only>-->
+> ```tsx
+> { /* display the text in blue and the progress bar in red */}
+> <ApiVideoPlayer
+>   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+>   theme={{
+>     trackPlayed: "#FF0000",
+>     text: "blue"
+>   }}/>
+> ```
+<!--<documentation_only>
+{% endraw %}
+</documentation_only>-->
 
 ##### Ads
 Ads can be displayed in the player. To do so, you need to pass the `ads` option to the sdk constructor. In the `ads` object, pass the `adTagUrl` property with the url of the ad tag. The ad tag must be a VAST 2.0 or 3.0 url. For more information about VAST, check the [IAB documentation](https://www.iab.com/guidelines/vast/).