React Native Youtube Bridge Web

English | 한국어

A YouTube player library for external WebView implementation, designed to work seamlessly with react-native-youtube-bridge in React Native environments.

Overview

This library is useful when you want to implement external WebView functionality through custom web pages for playing YouTube videos in React Native applications.

Use Cases

In React Native environments, you can use YouTube iframe in WebView through two different approaches:

1function App() {
2  return (
3    <>
4      {/* Method 1: Using inline HTML (default) */}
5      <YoutubePlayer
6        source={source}
7        useInlineHtml
8      />
9      
10      {/* Method 2: Using external WebView page */}
11      <YoutubePlayer
12        source={source}
13        useInlineHtml={false}
14        // Default: https://react-native-youtube-bridge.pages.dev
15        webViewUrl="https://your-custom-player.com"
16      />
17    </>
18  )
19}

Currently, the default static site (https://react-native-youtube-bridge.pages.dev) is being used as the external WebView URL.

If you want to use your own custom player page, simply pass the URL to the webViewUrl property. You can easily build a React-based custom player page using @react-native-youtube-bridge/web.

Installation

1# npm
2npm install @react-native-youtube-bridge/web
3
4# pnpm
5pnpm add @react-native-youtube-bridge/web
6
7# yarn
8yarn add @react-native-youtube-bridge/web
9
10# bun
11bun add @react-native-youtube-bridge/web

Usage

1import { YoutubePlayer } from '@react-native-youtube-bridge/web';
2
3function CustomPlayerPage() {
4  return <YoutubePlayer />;
5}
6
7export default CustomPlayerPage;

Contributing

Please refer to the Contributing Guide for detailed information about how to contribute to this project and our development workflow.

License

MIT