#Styling and Layout

YoutubeView handles the actual render surface.

#Basic sizing

<YoutubeView player={player} width="100%" height={240} />

#Common styling props

<YoutubeView
  player={player}
  height={400}
  width={200}
  style={{ borderRadius: 10 }}
  iframeStyle={{ aspectRatio: 16 / 9 }}
  webViewStyle={{ backgroundColor: 'transparent' }}
/>

#Platform-specific props

• iframeStyle: Web only
• webViewStyle: iOS / Android only
• webViewProps: iOS / Android only

#webViewProps details

webViewProps is useful when you need to tune the underlying native WebView without replacing the bridge behavior.

<YoutubeView
  player={player}
  webViewProps={{
    renderToHardwareTextureAndroid: true,
    source: {
      headers: {
        'X-Example-Header': 'demo',
      },
    },
  }}
/>

The bridge still owns ref, source.uri, style, onMessage, javaScriptEnabled, and onError, so treat webViewProps as a partial customization layer.

#Practical recommendation

For responsive layouts on Web, combine width="100%" with iframeStyle={{ aspectRatio: 16 / 9 }}.