1.0.3 • Published 1 year ago
react-native-youtube-iframe-player v1.0.3
React native youtube iframe player is a youtube iframe that is cloned from the react-native-youtube-iframe library that solves the issue of showing the developer options when pressing on the iframe if using the youtube iframe inside the pressable component.
Support
iOS & Android
Installation
npm install react-native-youtube-iframe-player
Installing dependencies
npm install react-native-vector-icons react-native-youtube-iframe react-native-webview @miblanchard/react-native-slider @react-native-community/netinfo
- react-native-vector-icons
- react-native-youtube-iframe
- react-native-webview
- @miblanchard/react-native-slider
- @react-native-community/netinfo
Note:
You need to make configuration on iOS and Android by following the instruction from the above dependencies libraries.
Usage
import YoutubeIframePlayer from 'react-native-youtube-iframe-player';
// ...
<YoutubeIframePlayer
videoUrl='https://www.youtube.com/watch?v=f7OPcDX_LyI&t=3s'
height={210}
width='100%'
locale='km'
durationFontSize={15}
/>
Properties
Basic
Prop | Default | Type | Optional | Description |
---|---|---|---|---|
videoUrl | '' | string | false | The URL of the Youtube video |
height | 210 | number | true | The height of the iframe |
width | '100%' | number | true | The width of the iframe |
locale | 'km' | string | false | The locale of the warning message (km or en ) |
labelSize | 14 | number | true | The font size of the warning message |
playIconSize | 38 | number | true | The size of the play icon |
loadingColor | '#000000' | string | true | The color of the loading indicator |
durationFontSize | 11 | number | true | The font size of the duration and play seconds |
isTablet | false | boolean | true | The device is a tablet or mobile |
Note:
The default height is 320dp (tablet), 210dp (mobile), and 190dp (small width mobile)
Custom styles
Prop | Default | Type | Description |
---|---|---|---|
containerStyle | {...} | style | Style of the main container |
playPauseContainerStyle | {...} | style | Style of play/pause container |
Made with create-react-native-library