Vidstack Plyr failing to initialize ~10% of the time

[GeorgeDylan]

Current Behavior:

1/10 chance when opening a modal with a Vidstack Plyr player that it fails to initialize.

The video thumbnail appears with a blue circle (missing the play icon inside of it). If you click the circle it will output ERROR MediaPlayer [vidstack] play request failed.

Code:

this.player = new Plyr('#target', {
            title: this.session.name,
            src: 'https://www.youtube.com/watch?v=5eqQEiAXoqg',
            ratio: '16:9',
            poster: 'https://files.vidstack.io/sprite-fight/poster.webp',
            debug: 'debug',
        });

Log:

video-player.component.ts:44 VideoPlayerComponent.ngOnInit() 
vidstack-7RO-J1Y1.js:4153 INFO MediaPlayer 📼 Media source change
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📡 dispatching `source-change`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📡 dispatching `media-type-change`
vidstack-7RO-J1Y1.js:4153 INFO MediaPlayer Loader change `YouTubeProviderLoader`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📡 dispatching `sources-change`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📡 dispatching `sources-change`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📨 dispatching `media-rate-change-request`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📡 dispatching `sources-change`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📡 dispatching `sources-change`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📨 dispatching `media-rate-change-request`
vidstack-7RO-J1Y1.js:4153 DEBUG MediaPlayer 📨 dispatching `media-play-request`
vidstack-7RO-J1Y1.js:4153 INFO MediaPlayer 📬 received `media-play-request`
vidstack-7RO-J1Y1.js:4153 ERROR MediaPlayer [vidstack] play request failed

Expected Behavior:

• The video player is expected to initialize without failing.
• If it fails, it should try to reinitialize.
• At least provide a way to listen for an error so it can be properly handled and reloaded.

Steps To Reproduce:

1. Have vidstack plyr player in a modal (I tested it with both NgbOffcanvas modal & ion-modal)
2. Open / Close the modal until it fails to initialize properly

Note: Its not caused by opening and closing the modal, it can happen on the first open of the modal as well.

Environment:

This happens in both my Angular Ionic project as well as my Angular project.

Angular Project

• Framework: Angular@19
• Device: Windows 11 Desktop
• Browser: Edge Version 133.0.3065.92 (Official build) (64-bit)

Ionic Project

• Framework: Angular@18 / Ionic@8
• Device Windows 11 Desktop emulating iPhone 12 via Edge dev tools
• Browser: Edge Version 133.0.3065.92 (Official build) (64-bit)

Anything Else?

Here is a photo of how it looks when it fails. You can wait indefinitely and it will stay like this instead of trying to reinitialize.

[GeorgeDylan]

Note:

Adding a setTimeout before initializing reduces the likelihood of it failing to init

Timeout 0, reduces likelihood

ngAfterViewInit(): void {
        setTimeout(() => {
            this.initPlayer();
        }, 0);
    }

500ms fixes the issue

ngAfterViewInit(): void {
        setTimeout(() => {
            this.initPlayer();
        }, 500);
    }

[GeorgeDylan]

Update:

Waiting for the modal to complete its opening animation before initializing the player fixes the issue on my end.