player icon indicating copy to clipboard operation
player copied to clipboard

YT with vidstack, incorrect data-ended state, video only playing sound

Open gretchelin opened this issue 1 month ago • 0 comments

Current Behavior:

Following the setup guide from the docs, when playing youtube videos (in my test is youtube livestream), player sometimes got stuck on load, or only playing the audio.

Basically, when I autoplay, or click the player, it will instead show "refresh" button and the video will play for like 1s before going dark with huge refresh icon, or stuck on one image but show refresh icon. The time displayed also behave strangely, sometimes it will go down instead of up, or it will changes rapidly as if I speed up the video.

On cases where only audio is playing, it seems that data-ended got appended to the player incorrectly, causing .vds-blocker to overlay the player and hide the actual video behind it. If I hide the vds-blocker, the video is actually playing.

Tracking through the subscribed state, vidstack doesn't seem to be throwing any error or caught any issue.

In comparison, using direct embed code from youtube, the same video plays without issue.

I also noticed that the player does not support youtube /live/:id link.

Expected Behavior:

It should play without issue.

Steps To Reproduce:

  • Run the project, or use the vercel deployment to test.
  • Copy-paste any youtube live url to the provided input and click "Change URL".
  • For the player labelled "Javascript" and "Web Component", the player will behave strangely, while "Embed Code" will play just fine.

Reproduction Link:

repro

Environment:

"vidstack": "^1.12.13" "vue": "^3.5.22" "vite": "^7.1.9"

Anything Else?

Repro deployed in vercel: https://vidstack-test-rho.vercel.app/

gretchelin avatar Dec 13 '25 00:12 gretchelin