abritopach / capacitor-youtube-player

Capacitor Youtube Player is a custom Native Capacitor plugin to show Youtube Player on Web, IOS and Android platforms.

Hi there 👋

Passionate about technology. I try to develop any idea that comes to my mind. In love with mobile development both native and hybrid.

Trying to give back to the open source community everything it has taught / helped me.

👨‍💻 I’m currently working on

• Open source projects.
• New capacitor plugins.

📚 I’m currently learning ...

• Kotlin Multiplatform.
• Svelte.
• Rust.

💬 Ask me about ...

• Native application development.
• Hybrid application development.
• FrontEnd (Angular, React, Vue).
• Backend (NodeJS, Spring,...).
• ...

📫 How to reach me:

• Linkedin
• Twitter

💸 Help me

If you want to help me to keep contributing to the open source with projects, examples, plugins,... collaborate and buy me a coffee.

capacitor-youtube-player's Issues

Issue with running plugin on Capacitor 5

Hi I noticed that the package.json has these versions of capacitor
"@capacitor/android": "^4.5.0",
"@capacitor/cli": "^4.5.0",
"@capacitor/core": "^4.5.0",
"@capacitor/ios": "^4.5.0",
Any way these versions can be changed to "latest"? I understand if its a compatibility issue, in that case I will probably just downgrade to 4.5.0 because I confirmed your package works on ios and web haven't checked android but I assume it does as well. I checked that your plugin loaded the player on capacitor 5 btw so I assume it would work on any version.

More example/details required for using Capacitor Youtube API with Ionic 4 for Android and iOS app

The documentation is not proving to be enough to implement Capacitor Youtube API in my app using Ionic 4.
Can we have a demo app or some more detail on how to play video in the app using this API

How to play videos in full screen?

subj.

Safari/iOS : Youtube video is not occupying entire screen

Using versions
"capacitor-youtube-player": "^1.0.5",
"@ionic/angular-toolkit": "^3.1.1",
"@ionic/cli": "^6.18.1",
"@ionic/angular": "^5.9.3",
"@angular/cli": "^11.2.18"

Safari v15

The video player renders my video in the application. On using the fullscreen option in video player, the video tends to occupy only the full viewport height but not the entire width of the browser.

This seems to work fine in Google Chrome and Firefox.

Adding methods to the web version of the plugin to play playlists

• cuePlaylist
• loadPlaylist

Android Youtube Player events

Hi,
In the development of my Android application (Capacitor 3 + Ionic 6+ React), I need to get the status of the Youtube player to know when the video is finished.

How can I do this?

I am waiting for your answer

Greetings

Add debug / verbose mode

Add option when initializing the plugin to debug and display the logs by console.

Add configurable fullscreen mode option in iOS

Update to capacitor 4

Update to capacitor 4

Adding to Capacitor V3 project - doesn't show up in Android studio

I've got a Capacitor V3 project Android, I ran:

npm install --save capacitor-youtube-player@latest

then

npx cap sync

Tried this a couple of times and the plugin is still not present in my Android Studio project - as in not even listed on the left project explorer panel.

I can see that it is present in my node_modules folder though.

I build the project and it runs but when I call init as per your setup instructions:
YoutubePlayer.initialize(options);

I get YoutubePlayer undefined.

Anything I'm missing?

Cannot import several custom video Ionic components

Hi ! Thank you very much for your contribution which helped me a lot!

However, I'm stuck on an issue I hope you will help me solve:
I'd like to use several "video components" on the same page in Ionic Angular, but every time I import several only the first videoPlayer is loading. I've tried to log the return of the promise (then and catch) but with 2 components imported on the same page I only get one return.
I've also checked out your very nice examples for ionic angular with no chance because you do render several videos at once whereas what I am trying to achieve is to be able to import zero-to-many video components without having to centralize information 😅

video.component.ts :

import { AfterViewInit, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { YoutubePlayer } from 'capacitor-youtube-player';
import { IPlayerOptions } from 'capacitor-youtube-player/dist/esm/web/models/models';
import { v4 as uuidv4 } from 'uuid';

@Component({
	selector: 'app-video',
	templateUrl: './video.component.html',
	styleUrls: ['./video.component.scss'],
})
export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
	@Input() public video_id: string;
	@Input() public player_width: number = 640;
	@Input() public player_height: number = 360;
	@Input() public align: string;
	@Input() public autoplay: boolean = false;
	@Input() public fullscreen: boolean = true;
  id: string = uuidv4().replace(/-/g, '');

  ngOnInit() {
    if(this.align === undefined) this.align = 'center';
	}
  
  ngAfterViewInit() {
    this.initializeYoutubePlayer(Capacitor.getPlatform());
	}

	async ngOnDestroy() {
		await this.destroyYoutubePlayer();
	}

	
  initializeYoutubePlayer(platform: string) {
		// Fullscreen is mandatory for mobile
    console.log(platform)
		if (platform !== 'web') this.fullscreen = true;

		const options: IPlayerOptions = {
			playerId: this.id,
			playerSize: { width: this.player_width, height: this.player_height },
			playerVars: {
				autoplay: this.autoplay == true ? 1 : 0,
				rel: 0,
			},
			videoId: this.video_id,
      fullscreen: this.fullscreen
    };
    
    YoutubePlayer.initialize(options).then(value =>{console.log(value)}).catch(err => { console.log(err) });
  }

	async destroyYoutubePlayer() {
		await YoutubePlayer.destroy(this.id);
	}
}

video.component.html :

<ion-content class="video-player" [ngStyle]="{ 'text-align': this.align }">
  <ion-item>
    <div [id]="this.id"></div>
  </ion-item>
</ion-content>

homepage.page.html :

<ion-content>
  <app-video [video_id]="'bmwVba65l5M'" [align]="'left'" [fullscreen]="false" [autoplay]="false"></app-video>
  <app-video [video_id]="'dQw4w9WgXcQ'" [align]="'right'" [fullscreen]="false" [autoplay]="false"></app-video>
</ion-content>

Thank you in advance for your help!

plugin does not build with IOS 11

when trying to use capacitor youtube player i noticed it was trowing an error for ios 11 target deployment

com.abpjap.plugin.youtubeplayer does not exist

Ionic:

   Ionic CLI                     : 5.4.5 (/Users/username/.nvm/versions/node/v13.0.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.2
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/username/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v13.0.1 (/Users/username/.nvm/versions/node/v13.0.1/bin/node)
   npm               : 6.12.0
   OS                : macOS Catalina
   Xcode             : Xcode 11.0 Build version 11A420a

I have problems using the plugin, when i try to build the app on Android Studio, a get an error with the plugin import in MainActivity.java

This is my MainActivity.java:

package io.ionic.starter;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
import com.jeep.plugin.capacitor.capacitordatastoragesqlite.CapacitorDataStorageSqlite;
import com.abpjap.plugin.youtubeplayer.YoutubePlayer;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(CapacitorDataStorageSqlite.class);
      add(YoutubePlayer.class);
    }});
  }
}

The output of the build say:

error: package com.abpjap.plugin.youtubeplayer does not exist
error: cannot find symbol class YoutubePlayer

Missing .jar dependency

Error - Extra argument 'fullscreen' in call YPViewController.swift:50:64

/node_modules/capacitor-youtube-player/ios/Plugin/YPViewController.swift:50:64: Extra argument 'fullscreen' in call

Ionic:

Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.6
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : 3.5.1

Utility:

cordova-res (update available: 0.15.4) : 0.10.0
native-run : 1.6.0

System:

NodeJS : v18.0.0 (/usr/local/Cellar/node/18.0.0/bin/node)
npm : 8.6.0
OS : macOS Monterey

Not possible to control the player ?

Hello,

I am trying to change the player attributes by using playerVars in the initialize method.
But it seems not to work.

My coding:

const options = {
  playerId: 'YT',
  playerSize: {
    width: 200,
    height: 200
  },
  playerVars: {
    controls: 0,
    modestbranding: 0,
    autoplay: 1,
    rel: 0,
    showinfo: 1,
  },
  videoId: 'HcDad4y0dlo',
};

const result: any = await YoutubePlayerWeb.initialize(options);

I have tried various options, but the player looks always the same.

Any ideas? Should this work or is it a bug?

Thanks!
Nils

not working IOS 13.1

Hello,

Cordova's plugin: Youtube Video Player no longer works under IOS 13.1, I wanted to switch on this one. I wanted to stay on the one of cordova because we can make a play on a button in the form of item-avatar, and we are not obliged to declare on a div the video.

I wish to spend your plugin and see what is possible, but according to the documentation, when I run the application on the simulator, I open the page with the video, I have an error message:

Thread 2: signal SIGABRT

Ionic CLI : 5.2.7
@ionic/angular 4.9.0
NodeJS : v10.15.3
npm : 6.4.1
OS : macOS Mojave
Capacitor : 1.2.0
COCOAPODS: 1.6.1

Thank you

Adding multiple players in same page

I am trying to add multiple players in the same window but it seems that each time I call the initialize function the player is changes video instead of creating a new instance.

Can you please share an example of how to add multiple players?

Here is a sample how I am trying to implement this:

ngAfterViewInit() {
    this.videos.each((video) => {
          let options = {
            playerId: video.video_id,
            playerSize: {width: '100%', 'min-height': 230},
            videoId: video.video_id,
            playerVars: {autoplay: 1, modestbranding: 1},
            debug: true
          };

          if (Capacitor.platform === 'web')
            this.initializeYoutubePlayerPluginWeb(options);
          else  // Native
            this.initializeYoutubePlayerPluginNative(options);
        });

  async initializeYoutubePlayerPluginWeb(options) {
    const player = await YoutubePlayerWeb.initialize(options);
  }

  async initializeYoutubePlayerPluginNative(options) {
    const { YoutubePlayer } = Plugins;
    const playerReady = await YoutubePlayer.initialize(options);
  }

}

Support for Capacitor 2.X

It seems that the plugin doesn't work with Capacitor 2.x for Android devices. When I try to build the app I get error in YoutubePlayer.java with the following line
import com.getcapacitor.annotation.CapacitorPlugin;

annotation comes with the error Cannot resolve symbol 'annotation'

Any help with this?

Unable to Build APK in Capacitor 5 due to YouTube Player API Fragment Issue

I am facing a issue while building an APK in a Capacitor 5 project that involves the YouTube Player API integration. The plugin functions correctly on web platforms, but I encounter an error during the APK build process.

YouTubePlayerFragment.initialize(BuildConfig.YOUTUBE_API_KEY, new YouTubePlayer.OnInitializedListener() {
// Listener implementation
});

This issue is related to the absence of the "android.support.v4.app.Fragment class.

Project Details:
Capacitor version: 5.x.x
YouTube Player API plugin version: 1.1.0
Android SDK version: 33

Plugin Won't Run in a real Device

Run perfect in Android Emulator, but in a real device not working

BuildConfig not found

`
Ionic:

Ionic CLI : 5.4.2 (D:\User\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 5.2.1
@angular-devkit/build-angular : 0.901.8
@angular-devkit/schematics : 9.1.8
@angular/cli : 9.1.8
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.2.0
@capacitor/core : 2.2.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : not installed
native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (D:\Program Files (x86)\Android\android-sdk)
NodeJS : v12.18.0 (D:\Program Files\nodejs\node.exe)
npm : 6.14.5
OS : Windows 10
`

I have this Error

PROJECT_DIR\node_modules\capacitor-youtube-player\android\capacitor-youtube-player\src\main\java\com\abpjap\plugin\youtubeplayer\YoutubePlayerFragment.java:22: error: cannot find symbol
private YouTubePlayer youTubePlayer;
^
symbol: variable "MY_API_KEY"
location: class BuildConfig

Review the web methods definition

Release build fails

The release builds to fail when we use the plugin.

Error

> Task :capacitor-youtube-player:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':capacitor-youtube-player:verifyReleaseResources'.
> 1 exception was raised by workers:
  com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
node_modules/capacitor-youtube-player/android/capacitor-youtube-player/build/intermediates/aapt_friendly_merged_manifests/release/aapt/AndroidManifest.xml:13: error: resource mipmap/ic_launcher (aka com.abpjap.plugin.youtubeplayer.capacitoryoutubeplayer:mipmap/ic_launcher) not found.

node_modules/capacitor-youtube-player/android/capacitor-youtube-player/build/intermediates/aapt_friendly_merged_manifests/release/aapt/AndroidManifest.xml:13: error: resource mipmap/ic_launcher_round (aka com.abpjap.plugin.youtubeplayer.capacitoryoutubeplayer:mipmap/ic_launcher_round) not found.
  error: failed processing manifest.
  

How to reproduce?

Install the plugin and try to get a release build.

./gradlew assembleRelease

Cannot read property 'initialize' of undefined

Hi,
I tried to include this plugin into my project but it seems like the plugin is not part of the capacitor plugins. I only tried on Android (Emulator)

import { Plugins, Capacitor } from "@capacitor/core

I also tried running the example project but got the same results. Not sure if I'm missing another step.

ionic build
npx cap add android
npx cap open android

Also tried running
npx cap sync

Thank you,
Daniel

Two App Icons are present

When we install this plugin, two instances of app icon are present.
This is because of the presence of the intent in the android manifest.

Youtube Player events

Hi,
Looking at the web.js file in this package it looks like you are consuming the events.

onReady
onStateChange
onReady
onError

I tried adding a listener on the YoutubePlayerWeb object. The callbacks are not being called. Since it seems like you are only listening to events and just console.log the results, can you please allow us to pass the event listeners as options when the player is first initialized?

Thank you,
Daniel

Exposed Google API keys

I built an ionic 6 capacitor 3 app with this plugin, it worked fine until just recently it stoped working on android. Google started blocking the app because they said my app was exposing GCP API keys. How can I fix this?

Native video list not working

I couldn't initialize video list in Android. In Android, player only show the last one in full screen.
The example code only include for web, do not mention about video list for Native.
Is this plugin support to load video list in Native or not?

I also got warning about 'Plugins' is deprecated in import line.
import { Plugins, Capacitor } from '@capacitor/core';

Capacitor does not work in device

I always return undefined error. runs good on web but not on android device. Will there be a fix or is this project dead?