[{"data":1,"prerenderedAt":206},["ShallowReactive",2],{"post-\u002Fblog\u002Fvidstack":3},{"id":4,"title":5,"body":6,"date":197,"description":198,"extension":199,"meta":200,"navigation":129,"path":201,"seo":202,"sitemap":203,"stem":204,"__hash__":205},"blog\u002Fblog\u002Fvidstack.md","Fixing web video",{"type":7,"value":8,"toc":192},"minimark",[9,18,21,27,32,42,45,49,52,75,79,82,185,188],[10,11,12,13,17],"p",{},"The default HTML5 ",[14,15,16],"code",{},"\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.",[10,19,20],{},"Most libraries are bloated legacy code from the jQuery era.",[22,23,24],"blockquote",{},[10,25,26],{},"\"Stop reinventing the wheel. Just play the video.\"",[28,29,31],"h3",{"id":30},"enter-vidstack","Enter Vidstack",[10,33,34,41],{},[35,36,40],"a",{"href":37,"rel":38},"https:\u002F\u002Fvidstack.io\u002F",[39],"nofollow","Vidstack"," is what modern media on the web should look like.",[10,43,44],{},"It’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.",[28,46,48],{"id":47},"why-use-it","Why use it",[10,50,51],{},"It’s framework-agnostic (React, Svelte, Vue, Solid) and lightweight. It handles the boring stuff so you don't have to:",[53,54,55,63,69],"ul",{},[56,57,58,62],"li",{},[59,60,61],"strong",{},"Unified API:"," Treat YouTube, Vimeo, and HLS exactly the same.",[56,64,65,68],{},[59,66,67],{},"A11y:"," Fully accessible out of the box.",[56,70,71,74],{},[59,72,73],{},"Styling:"," Tailwind CSS support via data attributes.",[28,76,78],{"id":77},"usage","Usage",[10,80,81],{},"Install it, import the styles, and drop the component.",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-tsx shiki shiki-themes github-light github-dark","import { 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","tsx","",[14,90,91,114,124,131,162,174],{"__ignoreMap":88},[92,93,96,100,104,107,111],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"szBVR","import",[92,101,103],{"class":102},"sVt8B"," { MediaPlayer, MediaProvider } ",[92,105,106],{"class":98},"from",[92,108,110],{"class":109},"sZZnC"," '@vidstack\u002Freact'",[92,112,113],{"class":102},";\n",[92,115,117,119,122],{"class":94,"line":116},2,[92,118,99],{"class":98},[92,120,121],{"class":109}," '@vidstack\u002Freact\u002Fplayer\u002Fstyles\u002Fdefault\u002Ftheme.css'",[92,123,113],{"class":102},[92,125,127],{"class":94,"line":126},3,[92,128,130],{"emptyLinePlaceholder":129},true,"\n",[92,132,134,137,141,145,148,151,154,156,159],{"class":94,"line":133},4,[92,135,136],{"class":102},"\u003C",[92,138,140],{"class":139},"sj4cs","MediaPlayer",[92,142,144],{"class":143},"sScJk"," title",[92,146,147],{"class":98},"=",[92,149,150],{"class":109},"\"Sprite Fight\"",[92,152,153],{"class":143}," src",[92,155,147],{"class":98},[92,157,158],{"class":109},"\"youtube\u002F_cMxraX_5RE\"",[92,160,161],{"class":102},">\n",[92,163,165,168,171],{"class":94,"line":164},5,[92,166,167],{"class":102},"  \u003C",[92,169,170],{"class":139},"MediaProvider",[92,172,173],{"class":102}," \u002F>\n",[92,175,177,180,182],{"class":94,"line":176},6,[92,178,179],{"class":102},"\u003C\u002F",[92,181,140],{"class":139},[92,183,184],{"class":102},">;\n",[10,186,187],{},"It looks clean, it loads fast, and it doesn't fight you.",[189,190,191],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":88,"searchDepth":116,"depth":116,"links":193},[194,195,196],{"id":30,"depth":126,"text":31},{"id":47,"depth":126,"text":48},{"id":77,"depth":126,"text":78},"2025-11-29","Production-ready players in minutes.","md",{},"\u002Fblog\u002Fvidstack",{"title":5,"description":198},{"loc":201},"blog\u002Fvidstack","9dmv2doOFiRiqE_tUPj-XCzEqYyVfU5Y7GFZBFz0Xn4",1783186628091]