React iframe autoplay
Propsheight#Number Requiredheight of the webview container Show noteEmbedded 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 tipThe 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. noteEmbedded 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 cautionWorks 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 autoPlayThe HTML5 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:
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:
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 cautionandroid 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:
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. cautionchanging these parameters might cause the player to restart or not change at all till it is remounted
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 tag on the webpage. Defaults to 1.0 zoom -enabling the allowWebViewZoom disabled the maximum-scale attribute in the webpage |