Props
height#
Number Requiredheight 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.
width#
Numberwidth 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.
videoId#
StringSpecifies the YouTube Video ID of the video to be played.
playList#
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']}
playListStartIndex#
NumberStarts the playlist from the given index
caution
Works only if the playlist is a list of video IDs
play#
BooleanFlag 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
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)
ref#
YoutubeIframeRefGives access to the player reference. This can be used to access player functions.
Player Functions Documentation
baseUrlOverride#
StringA 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
useLocalHTML#
Booleanuse locally generated html to render on the webview
onChangeState#
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 |
onReady#
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.
onError#
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. |
onFullScreenChange#
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
onPlaybackQualityChange#
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 |
mute#
BooleanFlag to tell the player to mute the video.
volume#
NumberSets the volume. Accepts an integer between 0 and 100.
playbackRate#
NumberThis 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.
onPlaybackRateChange#
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#
InitialPlayerParamsA 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
viewContainerStyle#
A style prop that will be given to the webview container
webViewStyle#
A style prop that will be given to the webview
webViewProps#
Props that are supplied to the underlying webview (react-native-webview). A full list of props can be found here
forceAndroidAutoplay#
BooleanChanges user string to make autoplay work on the iframe player for some android devices.
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';
allowWebViewZoom#
BooleanControls whether the embedded webview allows user to zoom in. Defaults to false
contentScale#
Numberscale factor for initial-scale and maximum-scale in <meta /> tag on the webpage. Defaults to 1.0
zoom -
enabling the allowWebViewZoom disabled the maximum-scale attribute in the webpage