https://github.com/sinhapaurush/rn-yt-player
A package for React Native to embed YouTube video in React Native without pain. It customizable, so that you can embed secure videos with it.
https://github.com/sinhapaurush/rn-yt-player
Last synced: 11 months ago
JSON representation
A package for React Native to embed YouTube video in React Native without pain. It customizable, so that you can embed secure videos with it.
- Host: GitHub
- URL: https://github.com/sinhapaurush/rn-yt-player
- Owner: sinhapaurush
- License: bsd-2-clause
- Created: 2023-08-22T19:45:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T13:45:04.000Z (over 2 years ago)
- Last Synced: 2025-03-13T05:46:39.672Z (12 months ago)
- Language: JavaScript
- Size: 73.2 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native YouTube Video Player 🔥
This is a plugin for React Native making playing YouTube video in React Native without pain.
It includes almost everything a developer needs to do with a YouTube video in his/her app.
Developers can easily modify the player according to their app (till an extent), and choose options they want to show in YouTube player.
## Installation
```bash
npm install rn-yt-player react-native-webview
```
Under the hood this package works with [`react-native-webview`](https://www.npmjs.com/package/react-native-webview), ie make sure that it is also installed.
## Usage
Import the package like below
```js
import YouTubePlayer from 'rn-yt-player';
```
then simply use the package like below
```js
```
## Props
| S.N. | Prop Name | Accepted Data Type | Accepted Values | Default | Description |
|:----------|:-------------|:------|:---|:---|:---|
|1|`videoSource`|`string`|Any Youtube Video URL, it can be directly from Browser or sharable link or URL for embeding video provided by YouTube in embed code or it can also be directly Video ID| A Video on Youtube | Provide package the video |
|2|`startVideoFrom`|`number \| string`| Time in seconds | `0` | Used to set initial point of video, ie video will start from this point to timeframe|
|3|`width`|`number \| string`|Width for Video Player|`"100%"`| Sets width to Video Player, also accepts `string` so that you can use percentage relative to parent|
|4|`height`|`number`|Height for Video Player|`200`|Sets height of Video Player. **It don't accept `string`, if you provide it with a string value JavaScript will do something weird.**|
|5|`accentColor`|`string` |`color`| Differs| Sets colour to seek bar, priotied color to these if these are unset: Initial Play Button|
|6|`innerPlayButtonColor`|`string`|`color`|`#FFFFFF`|Sets colour to interior portion (triangle) in Play Button|
|7|`playButtonColor`|`string`|`color`| If both `innerPlayButtonColor` and `accentColor` are unset then `#000000` else if `playButtonColor` is unset then `accentColor`, if `playButtonColor` is set then it is only priortied.|Sets colour to Play Button (Outer Circle)|
|8|`hideYTLogo`|`boolean`|`true \| false`| `false`|Hides YouTube Logo below seek bar|
|9|`hideTopBar`|`boolean`|`true \| false`|`false`|Hides top bar in YT Video player, ie it hides Channel Profile Picture, Video Title, copy link button, share video button and 3-dots (more) button|
|10|`hideSettingButton`|`boolean`|`true \| false`| `false` | Hides setting button below seek bar|
|11|`hideCaptionButton`|`boolean`|`true \| false`|`false`| Hides caption button below seek bar|
|12|`hideControls`|`boolean`|`true \| false`|`false`|Hides all controls of Video (Seek Bar, Caption Button, Setting Button, Full Screen Button, Volume Button, Play/Pause button below seek bar)|
|13|`children`|`React.Component`|`React.Component`|A default loader|Replaces default loader with your Component until the Video is loaded in Player|
|14|`loaderContainerStyle`|`object`|`style`|`undefined`|It is applied only if you are using custom loader by providing one into `children` prop. It provides access to styling parent component of loader box which covers Video Player until video is loaded. Hence it can be used to tweak background colour for loader|
## Example
- Code
```js
```
- Output
- 
## Author
- [Paurush Sinha](https://github.com/sinhapaurush/)