I am facing an issue while using the capacitor youtube player plugin

I have a video component in this I need to play a video in the template I have used capacitor youtube player plugin from this I have used IPlayerOptions and in this I need a videoId from the youtubelink so In the response data I have a video link from that video link I have extracted the unique_id in the video link and passed in the IplayerOptions and also passed a id in the playerOptions and in html I have given the id this id. I am sharing snapshots of the code.

detailVideo: any = [
id: 242,
title: “Opening Keynote | Max Lynch | Ioniconf 2021”,
videoId: “YouTube

html :

I am getting this error


I got the solution for the above issue , in the detailvideo object i am sending the id with a number instead of string , but here i am using capacitor.getPlatform() === ‘web’ , if i am using android instead of the web the video is not playing can any one help me out of this on how to play a video while we use mobile platform


A link to the plugin you are using would be helpful. Also, any reason why you are using a Capacitor plugin? My philosophy is to use the HTML tech stack as much as possible. If that is not feasible, only at that time reach for a native solution.

For my app, I am using plyr.io to play YouTube and Vimeo videos without any issues on Android/iOS/Web.


Hi, thank you for your response.
I have gone through on plyr.io and I tried to use it but when I import and declaring in the imports I am getting an error like (This likely means that the library (ngx-plyr) which declares PlyrModule is not compatible with Angular Ivy.) and I have installed the latest version,
If you provide any source code on this it will be helpful

Thank you

I am using Vue so this code example may not be of help.

            class="video-player-modal auto-height"
            <div class="inner-content p-2">

<script lang="ts">
import { computed, defineComponent, onUnmounted } from 'vue'
import { IonModal } from '@ionic/vue'
import Plyr from 'plyr'
import { MediaHelper } from '@/utils/media-helper'
import { LoadingComponent } from '@/utils/loading-component'

export default defineComponent({
    components: {
    name: 'VideoPlayer',
    emits: {
        onVideoStart: null,
        onVideoPause: null,
        onVideoEnd: null,
        onVideoClose: null,
    props: {
        videoId: {
            type: String,
            required: true,
        playerId: {
            type: String,
            required: false,
            default: 'video-player',
        showVideoViewer: {
            type: Boolean,
            required: false,
            default: false,
    setup(props, { emit }) {
        const playerVideoId = computed(() => {
            const videoIdParts = props.videoId.split(':')

            if (videoIdParts.length !== 2) {
                return ''

            return videoIdParts[1]

        const videoType = computed(() => MediaHelper.determineVideoType(props.videoId))

        let player: Plyr

        const createPlayer = async () => {
            const loader = await LoadingComponent.create({ definedText: 'Loading' })

            player = new Plyr('#' + props.playerId, {
                debug: false,
                autopause: false,
                controls: [
                storage: {
                    enabled: false,

            player.on('ready', () => {

            player.on('playing', () => emit('onVideoStart'))
            player.on('pause', () => emit('onVideoPause'))
            player.on('ended', () => emit('onVideoEnd'))

        const destroyPlayer = () => {
            if (player != null) {

        onUnmounted(() => {

        return {
            // Computed properties

            // Methods