diff --git a/docs/props.mdx b/docs/props.mdx index 39e8893..8d1a70d 100644 --- a/docs/props.mdx +++ b/docs/props.mdx @@ -280,3 +280,13 @@ Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like ### `allowWebViewZoom` Controls whether the embedded webview allows user to zoom in. Defaults to `false` + +--- + +### `contentScale` + +scale factor for initial-scale and maximum-scale in `` tag on the webpage. Defaults to `1.0` + +:::info zoom - +enabling the `allowWebViewZoom` disabled the maximum-scale attribute in the webpage +::: diff --git a/index.d.ts b/index.d.ts index f0cc3fe..39b3988 100644 --- a/index.d.ts +++ b/index.d.ts @@ -122,6 +122,11 @@ export interface YoutubeIframeProps { * Set this React Ref to use ref functions such as getDuration. */ ref?: React.MutableRefObject; + /** + * scale factor for initial-scale and maximum-scale in + * tag on the webpage + */ + contentScale?: Number; } export interface YoutubeMeta { diff --git a/src/PlayerScripts.js b/src/PlayerScripts.js index bd3a7ac..4b22afd 100644 --- a/src/PlayerScripts.js +++ b/src/PlayerScripts.js @@ -66,6 +66,7 @@ export const MAIN_SCRIPT = ( playList, initialPlayerParams, allowWebViewZoom, + contentScale, ) => { const { end, @@ -93,12 +94,13 @@ export const MAIN_SCRIPT = ( const showClosedCaptions_s = showClosedCaptions ? 1 : 0; const list = typeof playList === 'string' ? playList : ''; const listType = typeof playList === 'string' ? 'playlist' : ''; + const contentScale_s = typeof contentScale === 'number' ? contentScale : 1.0; - // scale will either be "initial-scale=0.8" - let scale = 'initial-scale=0.8'; + // scale will either be "initial-scale=1.0" + let scale = `initial-scale=${contentScale_s}`; if (allowWebViewZoom) { - // or "initial-scale=0.8, maximum-scale=0.8" - scale += ', maximum-scale=0.8'; + // or "initial-scale=0.8, maximum-scale=1.0" + scale += `, maximum-scale=${contentScale_s}`; } return ` diff --git a/src/YoutubeIframe.js b/src/YoutubeIframe.js index 4b454b7..c8cdf46 100644 --- a/src/YoutubeIframe.js +++ b/src/YoutubeIframe.js @@ -29,6 +29,7 @@ const YoutubeIframe = (props, ref) => { webViewStyle, webViewProps, playbackRate = 1, + contentScale = 1.0, onError = _err => {}, onReady = _event => {}, playListStartIndex = 0, @@ -180,6 +181,7 @@ const YoutubeIframe = (props, ref) => { playList, initialPlayerParams, allowWebViewZoom, + contentScale, ), }} userAgent={