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