| id | title |
|---|---|
component-props |
Props |
export const Type = ({children, color}) => ( <span style={{ backgroundColor: '#25c2a0', borderRadius: '20px', color: '#fff', padding: '0.2em 0.4em 0.2em 0.4em', fontSize: '0.8em', }}> {children} );
export const Important = ({children, color}) => ( <span style={{ backgroundColor: '#ff0000', borderRadius: '20px', color: '#fff', padding: '0.2em 0.4em 0.3em 0.4em', fontSize: '0.8em', }}> {children} );
Number Required
height of the webview container
:::note Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players are at least 480 pixels wide and 270 pixels tall. :::
Number
width of the webview container
:::tip
The player will grow to fit the width of its parent, unless the parent has specified alignItems or justifyContent (depending on flex direction) in which case a width is required.
:::
:::note Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players are at least 480 pixels wide and 270 pixels tall. :::
String
Specifies the YouTube Video ID of the video to be played.
String Array[String]
Specifies the playlist to play. It can be either the playlist ID or a list of video IDs
playList={'PLbpi6ZahtOH6Blw3RGYpWkSByi_T7Rygb'}
or
playList={['QRt7LjqJ45k', 'fHsa9DqmId8']}
Number
Starts the playlist from the given index
:::caution Works only if the playlist is a list of video IDs :::
Boolean
Flag to tell the player to play or pause the video.
Make sure you match this flag onChangeState to handle user pausing
the video from the youtube player UI
:::note autoPlay
The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by user interaction (such as tapping on the player).
However, the webview provides APIs to overcome this and will allow auto play in most cases. Use the forceAndroidAutoplay prop if autoplay still doesn't work. (usually is affected by older android devices) :::
YoutubeIframeRef
Gives access to the player reference. This can be used to access player functions.
Player Functions Documentation
String
A link that serves the iframe code. If you want to host the code on your own domain, get the source from here.
Default link - https://lonelycpp.github.io/react-native-youtube-iframe/iframe.html
Boolean
use locally generated html to render on the webview
function(event: string)
This event fires whenever the player's state changes. The callback is fired with an event (string) that corresponds to the new player state. Possible values are:
| events | description |
|---|---|
| unstarted | fired before the first video is loaded |
| video cue | next video cue |
| buffering | current video is in playing state but stopped for buffering |
| playing | current video is playing |
| paused | current video is paused |
| ended | video has finished playing the video |
function(event: string)
This event fires when the player has finished loading and is ready to begin receiving API calls. Your application should implement this function if you want to automatically execute certain operations, such as playing the video or displaying information about the video, as soon as the player is ready.
function(error: string)
This event fires if an error occurs in the player. The API will pass an error string to the event listener function. Possible values are:
| errors | reason |
|---|---|
| invalid_parameter | The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks. |
| HTML5_error | The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. |
| video_not_found | The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private. |
| embed_not_allowed | The owner of the requested video does not allow it to be played in embedded players. |
function(status: string)
This event fires whenever the player goes in or out of fullscreen mode with a boolean that identifies the new fullscreen status
:::caution android only, see issue #45 for work on ios support :::
function(quality: string)
This event fires whenever the video playback quality changes. It might signal a change in the viewer's playback environment.
The data value that the API passes to the event listener function will be a string that identifies the new playback quality. Possible values are:
| Quality |
|---|
| small |
| medium |
| large |
| hd720 |
| hd1080 |
| highres |
Boolean
Flag to tell the player to mute the video.
Number
Sets the volume. Accepts an integer between 0 and 100.
Number
This sets the suggested playback rate for the current video. If the playback rate changes, it will only change for the video that is already cued or being played.
Calling this function does not guarantee that the playback rate will actually change. However, if the playback rate does change, the onPlaybackRateChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackRate function.
The getAvailablePlaybackRates method will return the possible playback rates for the currently playing video. However, if you set the suggestedRate parameter to a non-supported integer or float value, the player will round that value down to the nearest supported value in the direction of 1.
function(playbackRate: Number)
This event fires whenever the video playback rate changes. Your application should respond to the event and should not assume that the playback rate will automatically change when the playbackRate value changes. Similarly, your code should not assume that the video playback rate will only change as a result of an explicit call to setPlaybackRate.
The playbackRate that the API passes to the event listener function will be a number that identifies the new playback rate. The getAvailablePlaybackRates method returns a list of the valid playback rates for the video currently cued or playing.
InitialPlayerParams
A set of parameters that are initialized when the player mounts.
:::caution changing these parameters might cause the player to restart or not change at all till it is remounted :::
A style prop that will be given to the webview container
A style prop that will be given to the webview
Props that are supplied to the underlying webview (react-native-webview). A full list of props can be found here
Boolean
Changes user string to make autoplay work on the iframe player for some android devices.
:::info user agent string used - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36'; :::
Boolean
Controls whether the embedded webview allows user to zoom in. Defaults to false
Number
scale factor for initial-scale and maximum-scale in <meta /> tag on the webpage. Defaults to 1.0
:::info zoom -
enabling the allowWebViewZoom disabled the maximum-scale attribute in the webpage
:::