YouTube videos with IDs starting with a hyphen (-) fail to load in JS CDN Vidstack player #1737
Description
Bug Report: YouTube Videos with IDs Starting with Hyphen Fail to Load in Vidstack
Description
YouTube videos with video IDs that start with a hyphen (e.g., -cMxraX_5RE) fail to load when using the Vidstack YouTube provider via the JS CDN. The player displays a blank frame or an error message, while videos with standard IDs load correctly. This issue occurs despite YouTube supporting such video IDs natively.
Steps to Reproduce
-
Create an HTML file with the following content (or use the provided
vidstack.test.html):<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vidstack YouTube Test</title> <!-- Vidstack styles --> <link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" /> <link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" /> <style> body { background: #0f172a; color: white; margin: 0; padding: 40px; font-family: system-ui; } #player { width: 100%; max-width: 900px; aspect-ratio: 16 / 9; background: black; } </style> </head> <body> <h2>Vidstack YouTube ID Test</h2> <p>Video ID: <strong>-2RAq5o5pwc</strong></p> <div id="player"></div> <script type="module"> import { VidstackPlayer, VidstackPlayerLayout } from 'https://cdn.vidstack.io/player'; console.log('Creating Vidstack player...'); const player = await VidstackPlayer.create({ target: '#player', src: 'youtube/-2RAq5o5pwc', title: 'Hyphen ID Test', layout: new VidstackPlayerLayout(), }); console.log('Player created:', player); </script> </body> </html>
-
Open the HTML file in a web browser (e.g., Chrome, Firefox, or Safari).
-
Observe that the video does not load; the player shows a blank frame or an error.
Expected Behavior
The video should load and play normally, as YouTube supports video IDs starting with hyphens.
Actual Behavior
The player fails to load the video, displaying a blank frame or error instead.
Environment
- Framework: Plain JavaScript (CDN-based)
- Browser: Chrome, Firefox, Safari (tested on all)
- OS: Windows, macOS, Linux (tested on all)
- Vidstack Version: Latest JS CDN version (exact version unknown)
Reproduction Link
Create a minimal reproduction case on CodePen or JSFiddle and share the link.
Additional Information
- Other YouTube videos with standard IDs (not starting with hyphens) work fine.
- The issue may be related to URL parsing or parameter handling in the Vidstack library when the ID begins with a hyphen.