Skip to main content

YouTube Player Capacitor plugin

Embed YouTube videos with full player API control and event handling

Install

bun add @capgo/capacitor-youtube-player bunx cap sync
npm, pnpm or yarn
  • npm install @capgo/capacitor-youtube-player
  • pnpm add @capgo/capacitor-youtube-player
  • yarn add @capgo/capacitor-youtube-player

Guide

How to use YouTube Player in Capacitor

Test on device

Download the Capgo app, then scan the QR code.

YouTube Player plugin preview QR code

Using @capgo/capacitor-youtube-player

YouTube Player Plugin interface for Capacitor. Provides methods to control YouTube video playback in your app.

Install

bun add @capgo/capacitor-youtube-player
bunx cap sync

What This Plugin Exposes

  • initialize - Initialize a new YouTube player instance.
  • destroy - Destroy a player instance and free resources.
  • stopVideo - Stop video playback and cancel loading. Use this sparingly - pauseVideo() is usually preferred.
  • playVideo - Play the currently cued or loaded video. Final player state will be PLAYING (1).

Main WebView Referer Patch

Enable patchRefererHeader when YouTube content works in the plugin but fails from Capacitor's main WebView because YouTube expects a browser-like Referer header.

{
  "plugins": {
    "YoutubePlayer": {
      "patchRefererHeader": true,
      "refererHeader": "https://www.youtube.com"
    }
  }
}

The patch only applies to youtube.com, youtube-nocookie.com, and youtu.be requests. Existing request-level Referer headers are preserved, and refererHeader defaults to https://www.youtube.com when omitted.

Example Usage

initialize

Initialize a new YouTube player instance.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.initialize({
  playerId: 'my-player',
  videoId: 'dQw4w9WgXcQ',
  playerSize: { width: 640, height: 360 },
  privacyEnhanced: true
});

destroy

Destroy a player instance and free resources.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

const result = await YoutubePlayer.destroy({ playerId: 'player-id-123' });
console.log(result);

stopVideo

Stop video playback and cancel loading. Use this sparingly - pauseVideo() is usually preferred.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

const result = await YoutubePlayer.stopVideo({ playerId: 'player-id-123' });
console.log(result);

playVideo

Play the currently cued or loaded video. Final player state will be PLAYING (1).

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

const result = await YoutubePlayer.playVideo({ playerId: 'player-id-123' });
console.log(result);

Full Reference

Keep going from Using @capgo/capacitor-youtube-player

If you are using Using @capgo/capacitor-youtube-player to plan native media and interface behavior, connect it with @capgo/capacitor-youtube-player for the implementation detail in @capgo/capacitor-youtube-player, Getting Started for the implementation detail in Getting Started, Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

FAQ

YouTube Player plugin FAQ

How do I install the YouTube Player plugin in a Capacitor app?

Run "bun add @capgo/capacitor-youtube-player" (or "npm install @capgo/capacitor-youtube-player"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-youtube-player" in your app code.

Does @capgo/capacitor-youtube-player work with React, Vue and Angular?

Yes. YouTube Player is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-youtube-player support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-youtube-player free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-youtube-player/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Can I update code that uses YouTube Player without an App Store review?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

Ship YouTube Player changes without waiting for app review

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Start with Capgo