[{"data":1,"prerenderedAt":9},["ShallowReactive",2],{"post-\u002Fblog\u002Fvidstack":3},{"path":4,"title":5,"description":6,"date":7,"rawbody":8},"\u002Fblog\u002Fvidstack","Fixing web video","Production-ready players in minutes.","2025-11-29","---\ntitle: 'Fixing web video'\ndescription: 'Production-ready players in minutes.'\ndate: '2025-11-29'\n---\n\nThe default HTML5 `\u003Cvideo>` tag is ugly and inconsistent across browsers. Building a custom player from scratch is a trap—you spend weeks fighting CSS and accessibility edge cases instead of shipping features.\n\nMost libraries are bloated legacy code from the jQuery era.\n\n> \"Stop reinventing the wheel. Just play the video.\"\n\n### Enter Vidstack\n\n[Vidstack](https:\u002F\u002Fvidstack.io\u002F) is what modern media on the web should look like.\n\nIt’s a set of building blocks for standardizing the video experience. Whether you are streaming HLS, rendering a local file, or embedding YouTube, the API and the UI remain consistent.\n\n### Why use it\n\nIt’s framework-agnostic (React, Svelte, Vue, Solid) and lightweight. It handles the boring stuff so you don't have to:\n\n- **Unified API:** Treat YouTube, Vimeo, and HLS exactly the same.\n- **A11y:** Fully accessible out of the box.\n- **Styling:** Tailwind CSS support via data attributes.\n\n### Usage\n\nInstall it, import the styles, and drop the component.\n\n```tsx\nimport { MediaPlayer, MediaProvider } from '@vidstack\u002Freact';\nimport '@vidstack\u002Freact\u002Fplayer\u002Fstyles\u002Fdefault\u002Ftheme.css';\n\n\u003CMediaPlayer title=\"Sprite Fight\" src=\"youtube\u002F_cMxraX_5RE\">\n  \u003CMediaProvider \u002F>\n\u003C\u002FMediaPlayer>;\n```\n\nIt looks clean, it loads fast, and it doesn't fight you.\n",1783267423470]