react-native-bridges · saseungmin · Jun 24, 2025 · Jun 24, 2025
diff --git a/babel.config.js b/babel.config.js
diff --git a/packages/react-native-youtube-bridge/LICENSE b/packages/react-native-youtube-bridge/LICENSE
@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 saseungmin
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/react-native-youtube-bridge/README-ko_kr.md b/packages/react-native-youtube-bridge/README-ko_kr.md
@@ -239,7 +239,9 @@ function App() {
 YouTube 플레이어 렌더링 방식을 제어하고 호환성을 위한 소스 URL을 설정합니다.
 
 1. **인라인 HTML 모드** (`useInlineHtml: true`)는 앱 내에서 직접 HTML을 로드하여 플레이어를 렌더링합니다. (default)
-2. **웹뷰 모드** (`useInlineHtml: false`)는 외부 플레이어 페이지를 로드합니다. 기본 URI는 https://react-native-youtube-bridge.pages.dev 입니다.
+2. **웹뷰 모드** (`useInlineHtml: false`)는 외부 플레이어 페이지를 로드합니다.
+   - 기본 URI는 https://react-native-youtube-bridge.pages.dev 입니다.
+   - 직접 제작한 커스텀 플레이어 페이지를 외부 웹뷰로 사용하려면, `@react-native-youtube-bridge/web`으로 플레이어를 구축한 후 `webViewUrl`에 해당 URL을 설정하세요. 자세한 구현 방법은 [웹 플레이어 가이드](../web/)를 참고해 주세요.
 
 > [!NOTE]
 > **webViewUrl 활용법**
@@ -264,9 +266,25 @@ YouTube 플레이어 렌더링 방식을 제어하고 호환성을 위한 소스
 />
 ```
 
+**커스텀 플레이어 페이지**
+
+직접 제작한 커스텀 플레이어 페이지를 사용하려면, `@react-native-youtube-bridge/web`을 활용하여 React 기반의 플레이어 페이지를 구축할 수 있습니다.
+
+```tsx
+import { YoutubePlayer } from '@react-native-youtube-bridge/web';
+
+function CustomPlayerPage() {
+  return <YoutubePlayer />;
+}
+
+export default CustomPlayerPage;
+```
+
+> 자세한 내용은 [웹 플레이어 가이드](../web/)를 참고해 주세요.
+
 ## 기여하기
 
-리포지토리 기여 방법과 개발 워크플로우를 알아보려면 [기여 가이드](CONTRIBUTING.md)를 참고하세요.
+리포지토리 기여 방법과 개발 워크플로우를 알아보려면 [기여 가이드](/CONTRIBUTING.md)를 참고하세요.
 
 ## 라이선스
 

diff --git a/packages/react-native-youtube-bridge/README.md b/packages/react-native-youtube-bridge/README.md
@@ -239,7 +239,9 @@ function App() {
 Control YouTube player rendering method and configure source URLs for compatibility.
 
 1. **Inline HTML Mode** (`useInlineHtml: true`) renders the player by loading HTML directly within the app. (default)
-2. **WebView Mode** (`useInlineHtml: false`) loads an external player page. The default URI is https://react-native-youtube-bridge.pages.dev.
+2. **WebView Mode** (`useInlineHtml: false`) loads an external player page.
+   - The default URI is https://react-native-youtube-bridge.pages.dev.
+   - To use your own custom player page as an external WebView, build your player with `@react-native-youtube-bridge/web` and set the URL in the `webViewUrl` property. For detailed implementation instructions, please refer to the [Web Player Guide](../web/).
 
 > [!NOTE]
 > **webViewUrl Usage**
@@ -264,9 +266,25 @@ Control YouTube player rendering method and configure source URLs for compatibil
 />
 ```
 
+**Custom Player Page**
+
+To use your own custom player page, you can build a React-based player using `@react-native-youtube-bridge/web`.
+
+```tsx
+import { YoutubePlayer } from '@react-native-youtube-bridge/web';
+
+function CustomPlayerPage() {
+  return <YoutubePlayer />;
+}
+
+export default CustomPlayerPage;
+```
+
+> For more details, please refer to the [Web Player Guide](../web/).
+
 ## Contributing
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+See the [contributing guide](/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
 ## License
 

diff --git a/packages/web/LICENSE b/packages/web/LICENSE
@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 saseungmin
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/web/README-ko_kr.md b/packages/web/README-ko_kr.md
@@ -0,0 +1,75 @@
+# React Native Youtube Bridge Web
+
+> [English](./README.md) | 한국어
+
+React Native 환경에서 [`react-native-youtube-bridge`](https://github.com/react-native-bridges/react-native-youtube-bridge)와 함께 사용할 수 있는 외부 웹뷰용 YouTube 플레이어 라이브러리입니다.
+
+## 개요
+
+이 라이브러리는 React Native 애플리케이션에서 YouTube 동영상을 재생할 때, 커스텀 웹 페이지를 통해 외부 웹뷰를 구현하고자 하는 경우에 유용합니다.
+
+## 사용 사례
+
+React Native 환경에서는 다음과 같은 두 가지 방법으로 YouTube iframe을 WebView에서 사용할 수 있습니다:
+
+```tsx
+function App() {
+  return (
+    <>
+      {/* 방법 1: 인라인 HTML 사용 (기본값) */}
+      <YoutubePlayer
+        source={source}
+        useInlineHtml
+      />
+
+      {/* 방법 2: 외부 웹뷰 페이지 사용 */}
+      <YoutubePlayer
+        source={source}
+        useInlineHtml={false}
+        // 기본값: https://react-native-youtube-bridge.pages.dev
+        webViewUrl="https://your-custom-player.com"
+      />
+    </>
+  )
+}
+```
+
+현재는 기본 정적 사이트(https://react-native-youtube-bridge.pages.dev)를 외부 웹뷰 URL로 사용하고 있습니다.
+
+만약 직접 제작한 커스텀 플레이어 페이지를 사용하고 싶다면, `webViewUrl` 속성에 해당 URL을 전달하면 됩니다. 이때 `@react-native-youtube-bridge/web`을 활용하여 React 기반의 커스텀 플레이어 페이지를 손쉽게 구축할 수 있습니다.
+
+## 설치
+
+```bash
+# npm
+npm install @react-native-youtube-bridge/web
+
+# pnpm
+pnpm add @react-native-youtube-bridge/web
+
+# yarn
+yarn add @react-native-youtube-bridge/web
+
+# bun
+bun add @react-native-youtube-bridge/web
+```
+
+## 사용법
+
+```tsx
+import { YoutubePlayer } from '@react-native-youtube-bridge/web';
+
+function CustomPlayerPage() {
+  return <YoutubePlayer />;
+}
+
+export default CustomPlayerPage;
+```
+
+## 기여하기
+
+프로젝트 기여 방법과 개발 워크플로우에 대한 자세한 내용은 [기여 가이드](./CONTRIBUTING.md)를 참고해 주세요.
+
+## 라이센스
+
+[MIT](./LICENSE)
diff --git a/packages/web/README.md b/packages/web/README.md
@@ -0,0 +1,75 @@
+# React Native Youtube Bridge Web
+
+> English | [한국어](./README-ko_kr.md)
+
+A YouTube player library for external WebView implementation, designed to work seamlessly with [`react-native-youtube-bridge`](https://github.com/react-native-bridges/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:
+
+```tsx
+function App() {
+  return (
+    <>
+      {/* Method 1: Using inline HTML (default) */}
+      <YoutubePlayer
+        source={source}
+        useInlineHtml
+      />
+
+      {/* Method 2: Using external WebView page */}
+      <YoutubePlayer
+        source={source}
+        useInlineHtml={false}
+        // Default: https://react-native-youtube-bridge.pages.dev
+        webViewUrl="https://your-custom-player.com"
+      />
+    </>
+  )
+}
+```
+
+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
+
+```bash
+# npm
+npm install @react-native-youtube-bridge/web
+
+# pnpm
+pnpm add @react-native-youtube-bridge/web
+
+# yarn
+yarn add @react-native-youtube-bridge/web
+
+# bun
+bun add @react-native-youtube-bridge/web
+```
+
+## Usage
+
+```tsx
+import { YoutubePlayer } from '@react-native-youtube-bridge/web';
+
+function CustomPlayerPage() {
+  return <YoutubePlayer />;
+}
+
+export default CustomPlayerPage;
+```
+
+## Contributing
+
+Please refer to the [Contributing Guide](./CONTRIBUTING.md) for detailed information about how to contribute to this project and our development workflow.
+
+## License
+
+[MIT](./LICENSE)