{"id":16946277,"url":"https://github.com/abritopach/ionic-test-capacitor-youtube-player","last_synced_at":"2026-02-27T12:41:11.425Z","repository":{"id":41779857,"uuid":"196214053","full_name":"abritopach/ionic-test-capacitor-youtube-player","owner":"abritopach","description":"Sample Ionic project to test Capacitor Youtube Player Plugin.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:16:19.000Z","size":5902,"stargazers_count":2,"open_issues_count":18,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T19:53:17.631Z","etag":null,"topics":["angular","angular8","capacitor","capacitor-plugin","ionic","ionic4","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abritopach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-10T13:50:53.000Z","updated_at":"2021-11-15T19:28:08.000Z","dependencies_parsed_at":"2023-02-06T11:31:06.088Z","dependency_job_id":null,"html_url":"https://github.com/abritopach/ionic-test-capacitor-youtube-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abritopach/ionic-test-capacitor-youtube-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-test-capacitor-youtube-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-test-capacitor-youtube-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-test-capacitor-youtube-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-test-capacitor-youtube-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abritopach","download_url":"https://codeload.github.com/abritopach/ionic-test-capacitor-youtube-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-test-capacitor-youtube-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280032415,"owners_count":26260899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-20T02:00:06.978Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular8","capacitor","capacitor-plugin","ionic","ionic4","typescript"],"created_at":"2024-10-13T21:26:51.200Z","updated_at":"2025-10-20T06:40:59.630Z","avatar_url":"https://github.com/abritopach.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic-Test-Capacitor-Youtube-Player\n\nSample Ionic project to test Capacitor Youtube Player Plugin.\n\n#### App WEB example\n\n![Plugin](readme_resources/plugin_ionic_web.gif \"Plugin\")\n\n#### App iOS example\n\n![Plugin](readme_resources/plugin_ionic_ios.gif \"Plugin\")\n\n#### App Android example\n\n![Plugin](readme_resources/plugin_ionic_android.gif \"Plugin\")\n\n\n## Running\n\nBefore you go through this example, you should have at least a basic understanding of Ionic concepts. You must also already have Ionic installed on your machine.\n\n* Test in localhost:\n\nTo run it, cd into `ionic-test-capacitor-youtube-player` and run:\n\n```bash\nnpm install\nionic serve\n```\n\n## Install Capacitor Youtube Player Plugin\n\n``` bash\n    npm install --save capacitor-youtube-player@latest\n```\n\n## Using Capacitor Youtube Player Plugin\n\n### IMPORTANT NOTE ANDROID (CAPACITOR 3.0)\n\nIf you get this error in ANDROID STUDIO\n\n![Error](readme_resources/android-error.jpg \"Error\")\n\nTo use the CAPACITOR YOUTUBE PLAYER plugin you need to add the YOUTUBE API KEY in the file local.properties.\n\n```bash\nYOUTUBE_API_KEY=\"YOUR_YOUTUBE_API_KEY\"\n```\n\nIf you don't have a local.properties file, create one.\nBy default, this file is in the .gitignore. If not add it so that your keys are not visible to anyone.\n\nYou have to register the Youtube Player plugin's class in your Activity so Capacitor is aware of it.\n\n```bash\npackage com.example.app;\n\nimport android.os.Bundle;\n\nimport com.abpjap.plugin.youtubeplayer.YoutubePlayer;\nimport com.getcapacitor.BridgeActivity;\nimport com.getcapacitor.Plugin;\n\nimport java.util.ArrayList;\n\npublic class MainActivity extends BridgeActivity {\n  @Override\n  public void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n\n    registerPlugin(YoutubePlayer.class); \u003c= ADD THIS LINE\n  }\n}\n```\n\nIn the official [Capacitor documentation](https://capacitorjs.com/docs/v3/updating/3-0#android) you have the instructions to migrate to version 3.0.\n\n### IMPORTANT NOTE ANDROID (CAPACITOR 2.0)\n\n```bash\npackage com.example.app;\n\nimport android.os.Bundle;\n\nimport com.abpjap.plugin.youtubeplayer.YoutubePlayer;\nimport com.getcapacitor.BridgeActivity;\nimport com.getcapacitor.Plugin;\n\nimport java.util.ArrayList;\n\npublic class MainActivity extends BridgeActivity {\n  @Override\n  public void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n\n    // Initializes the Bridge\n    this.init(savedInstanceState, new ArrayList\u003cClass\u003c? extends Plugin\u003e\u003e() {{\n      // Additional plugins you've installed go here\n      // Ex: add(TotallyAwesomePlugin.class);\n      add(YoutubePlayer.class); \u003c= ADD THIS LINE\n    }});\n  }\n}\n```\n\nIn the official [Capacitor documentation](https://capacitor.ionicframework.com/docs/plugins/android#export-to-capacitor) appears how to register the plugin.\n\n### IMPORTANT NOTE iOS (CAPACITOR 3.0)\n\nIn the official [Capacitor documentation](https://capacitorjs.com/docs/v3/updating/3-0#ios) you have the instructions to migrate to version 3.0.\n\n### IMPORTANT NOTE iOS (CAPACITOR 2.0)\n\nCurrently there is a small error when you testing the plugin in iOS. The following line of code needs to be modified in xcode:\n\nYouTubePlayer.swift:339:102: 'UIWebViewNavigationType' has been renamed to 'UIWebView.NavigationType'\n\n### Ionic / Angular project\n\n1) Install the plugin.\n\n```bash\nnpm install --save capacitor-youtube-player@latest\n```\n\n2) Import plugin in your page.\n\n```bash\nimport { Component, OnInit, AfterViewInit } from '@angular/core';\n\nimport { YoutubePlayerWeb } from 'capacitor-youtube-player'; // Web version\n\nimport { Plugins, Capacitor } from '@capacitor/core'; // Native version\n\n@Component({\n  selector: 'app-home',\n  templateUrl: 'home.page.html',\n  styleUrls: ['home.page.scss'],\n})\nexport class HomePage implements OnInit, AfterViewInit {\n\n  currentYear = new Date().getFullYear();\n\n  constructor() {\n  }\n\n  ngOnInit() {\n  }\n\n  ngAfterViewInit() {\n    if (Capacitor.platform === 'web') {\n      this.initializeYoutubePlayerPluginWeb();\n    } else { // Native\n      this.initializeYoutubePlayerPluginNative();\n    }\n  }\n\n  async initializeYoutubePlayerPluginWeb() {\n    const options = {playerId: 'youtube-player', playerSize: {width: 640, height: 360}, videoId: 'tDW2C6rcH6M'};\n    const result = await YoutubePlayerWeb.initialize(options);\n    console.log('playerReady', result);\n  }\n\n  async destroyYoutubePlayerPluginWeb() {\n    const result = await YoutubePlayerWeb.destroy('youtube-player');\n    console.log('destroyYoutubePlayer', result);\n  }\n\n  async initializeYoutubePlayerPluginNative() {\n\n    const { YoutubePlayer } = Plugins;\n\n    const options = {width: 640, height: 360, videoId: 'tDW2C6rcH6M'};\n    const playerReady = await YoutubePlayer.initialize(options);\n  }\n\n}\n```\n\n3) Build your app.\n\nYou must build your Ionic / Angular project at least once before adding any native platforms.\n\n```bash\n    ionic build // Ionic\n    ng build // Angular\n```\n\n4) Add Platforms.\n\n```bash\n    npx cap add ios\n    npx cap add android\n```\n\n5) Open IDE to build, run, and deploy.\n\n```bash\n    npx cap open ios\n    npx cap open android\n```\n\n## Requirements\n\n* [Node.js](http://nodejs.org/)\n* [Ionic](https://ionicframework.com/getting-started#cli)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabritopach%2Fionic-test-capacitor-youtube-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabritopach%2Fionic-test-capacitor-youtube-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabritopach%2Fionic-test-capacitor-youtube-player/lists"}