Astro Video Streaming
Video Streaming for Astro: Live and Recorded, One Component
Install the package. Paste a Content ID. Deploy.
WpStream’s @wpstream/astro component plays live channels or recorded videos on any Astro page. You can go live from the browser or OBS.
Tonight's local newscast
Broadcast from Your Astro WebsiteFrom channel to Astro page in three steps
Set up video in WpStream
Create a live channel or upload a video in the WpStream dashboard. Each gets a Content ID you can copy.
Drop one tag into the page
Run npm install @wpstream/astro, then paste the Content ID into a single WpStreamPlayer tag on your Astro page and deploy.
Broadcast and keep the recording
Go live from the browser or OBS. The page's player shows the stream. A recorded show becomes a video with its own Content ID.
Add one lazy-loaded player to your Astro site. WpStream handles ingest, recording and delivery, so your web host never serves the video traffic.
Video streaming for Astro
How to Add Video Streaming to an Astro Site
Adding video streaming to an Astro site takes three steps: run npm install @wpstream/astro, copy the Content ID from the "Content ID for Astro" tab in your WpStream dashboard, and paste it into one <WpStreamPlayer contentId="..." /> tag.
Deploy, and that page plays your live channel or recorded video. The same tag works for both.
Why a Hosted Player?
The Astro docs say there is no native video support in Astro and recommend using a hosted video service. A hosted service with its component is the framework's own advice.
Technically, it’s an Astro component with two props: contentId (required) and title (optional). It renders to a 16:9 iframe at build time or on-demand.
There’s no client directive, and no JavaScript from Astro, because the player’s code runs inside the iframe.
Honest Note: The package is new (version 0.1.3 on npm) and supports Astro 4 and later.
What Viewers Get
A full video player inside one iframe
Inside the iframe runs a Video.js player with HLS playback (quality adapts to the connection), a quality selector, fullscreen, and picture-in-picture.
It plays inline on phones and can show a live viewer count if you switch that on. The iframe uses loading="lazy", so a player below the fold waits until the visitor scrolls near it. This saves data and speeds up the loading of other parts of the page.
A player at the top of a "Watch live" page loads right away.
Video unavailable. Please try again later.
Add the Astro Video Player in Five Steps
Setup takes about five minutes. You need an Astro project that runs and a WpStream account, free or paid.
One component covers both kinds of video: the Content ID tells the player whether to show a live channel or a recorded video.
Install the Package
From the project root, run npm install @wpstream/astro. It’s the only dependency you need.
Copy a Live Channel's Content ID
In the WpStream dashboard, click Live Channels in the left sidebar and pick the channel. In the embed card below the player, open the Content ID for Astro tab and click Copy code. That string is all you need to show this channel.
Copy a Recorded Video's Content ID
Click Videos in the left sidebar and open the video, or upload a new one. On its Share card, open the Content ID for Astro tab and click Copy code. A recorded video has its own Content ID, separate from the channel's.
Paste One Tag in the Page
In the frontmatter, add import { WpStreamPlayer } from '@wpstream/astro'; then place <WpStreamPlayer contentId="..." title="Sunday service" /> where the video goes. The title prop sets the iframe title and aria-label (default is "WPStream player"). Paste the ID whole; it carries the channel or video ID plus an embed key.
Build and Deploy
Run astro build and deploy as usual. The player works in static output and on-demand pages since the component has no adapter requirement. A missing, damaged, or cut-off Content ID fails a static build with a clear message. The four build errors and their fixes are in the pre-deploy checklist.
Go Live into the Channel Your Page Shows
Your Astro page holds a channel's Content ID, not a single event. The page's player follows the channel, so going live normally needs no rebuild. You broadcast from the WpStream dashboard.
Go live from the browser with your camera and mic, or from OBS or any RTMP encoder (like Larix on phones). For the encoder side, see how to stream from OBS to your website.
Channel
Create or Pick the Live Channel
Set it up under Live Channels. Change its settings while the channel is stopped; the dashboard locks them while the channel runs. Recording can’t be switched on or off mid-broadcast.
Broadcast
Choose Browser or Encoder
Pick Browser broadcast to use the camera and mic straight from the dashboard. Or, pick External encoder to get an RTMP URL and stream key, and paste both into OBS or Larix.
Live
Go Live on the Astro Page
Turn the channel on and start broadcasting. Visitors on your Astro page watch the stream in the player, with quality options to choose from.
Replay
Keep the Broadcast as a Video
With "Record this stream" on, the broadcast saves as a video. That video gets its own Content ID for an archive page.
Where Each Control Lives
What do you set in Astro, and what in WpStream?
Your Astro code decides three things: which stream plays (the contentId prop), where the player sits in the layout, and its accessible title.
How playback behaves (autoplay, muted start, viewer count, recording, encryption, domain lock) lives in the WpStream dashboard, set per channel.
For an agency, this split is useful. You build and deploy the page. The client runs streams, recordings, and settings from their own WpStream account. You rarely touch the page again—just a rebuild with a fresh Content ID, at most.
Sizing follows the same rule. The wrapper is full width at 16:9, so put it inside your own container to size it. The player itself is WpStream's, and your Astro CSS can't restyle it beyond the wrapper. That's the trade for zero player code on your side.
| Setting | Set in | Applies to | Notes |
|---|---|---|---|
| Setting: Which stream plays | Set in: Astro code (contentId prop) | Applies to: Live and recorded | Notes: Paste the whole ID |
| Setting: Title, size, placement | Set in: Astro code (title prop and your layout) | Applies to: Live and recorded | Notes: 16:9, full width |
| Setting: Autoplay, start muted | Set in: WpStream dashboard | Applies to: Live channels | Notes: Change while the channel is stopped |
| Setting: Viewer count, recording | Set in: WpStream dashboard | Applies to: Live channels | Notes: Recording saves a video |
| Setting: AES-128 encryption | Set in: WpStream dashboard | Applies to: Live channels | Notes: May need a fresh Content ID after a change |
| Setting: Lock to website | Set in: WpStream dashboard | Applies to: Live channels only | Notes: No equivalent for recorded videos |
Before You Deploy the Astro Page
The component checks the Content ID in its frontmatter. A bad ID stops astro build (static output) or the request (on-demand pages). Nine checks, with the four build errors listed word for word.
Four Build Errors Explained
01
Astro 4 or later in package.json. Ensure @wpstream/astro is installed with npm.
02
Content ID copied from the Content ID for Astro tab, not from an iframe embed code, and pasted whole.
03
Import in the page frontmatter, and one <WpStreamPlayer> tag per player.
04
“WpStreamPlayer requires a contentId prop.” The prop is missing or empty. Paste the Content ID into it.
05
“WpStreamPlayer contentId must be valid base64.” The copy was cut off or picked up extra characters or spaces. Copy it again.
06
“WpStreamPlayer contentId must include exactly one content identifier: channel or video.” The ID was edited or joined with another one.
07
“WpStreamPlayer contentId must include an embedKey.” The ID is truncated. Copy the whole string from the dashboard.
08
Lock to website on? Check playback on the deployed domain you set, not only locally.
09
Channel settings changed only while stopped. After changing encryption or the locked domain, copy a fresh Content ID and rebuild, as the old one may no longer work.
A damaged ID stops a static build. Test the deployed page for stale ones.
Who Builds Live Video on Astro Sites
Astro is made for content-driven websites, like those run by a station, church, or venue. The Astro team noted on January 16, 2026, that "Adoption of the Astro web framework continues to double every year."
If you're an agency, the pattern is the same for every client who broadcasts on a schedule: one component and one Content ID per page, and the client runs the channel.
Local News and TV Stations
A "Watch live" page for the evening newscast, plus an archive page built from recorded bulletins. Each page carries one <WpStreamPlayer> tag, pointing to the channel or a recorded video.
Radio Stations
Put a camera in the studio and stream the show to the station's Astro site while on air. Recorded shows can sit on their own page as on-demand video.
Churches and Faith Broadcasters
The weekly service goes live on the church's Astro site, with each recording joining a sermon archive page, one tag per sermon.
Sports Clubs and Leagues
Matches and tournaments streamed openly to the club's own site, with recorded games kept on their own pages for fans who missed them.
Fitness Studios and Educators
Scheduled classes and lessons go out live, with each replay on its own page for anyone who missed the session.
Arts and Cultural Venues
Concerts, talks, and openings streamed to the venue's own site.
What does not work
on Astro yet
No paywall, pay-per-view or subscriptions
The Astro embed has no viewer login and no ticket check, so anyone who opens the page can watch. The pricing page's "unrestricted PPV streaming" line does not apply to Astro.
No chat
Neither the component nor the player has a chat. If your broadcast needs one, run a separate chat tool next to the player on the same page.
No domain lock for recorded videos
Lock to website exists for live channels only. The Content ID sits in your page HTML like any embed code.
For live channels, Lock to website and encryption are the controls; recorded videos have neither in the dashboard today.
Astro video player options
When is another Astro video player a better fit?
For casual public video, a YouTube embed is simpler. The astro-embed YouTube component loads YouTube's iframe "only when a user clicks play", which keeps the page light.
You get YouTube's player and branding, and for many pages that's fine.
Building video features in code (upload flows, per-viewer analytics, custom players, playback tokens)? The WpStream component has one required prop, no JavaScript API, and no events, so it gives you less developer control.
WpStream suits organizations that broadcast on a schedule. It acts as a dashboard with channels, a go-live button, recording, and plans in hours. The Astro side remains as a single tag.
| What you need | WpStream + @wpstream/astro | YouTube embed (astro-embed) |
|---|---|---|
| What you need: Astro side | WpStream + @wpstream/astro: One component, one Content ID | YouTube embed (astro-embed): One component, one video id |
| What you need: Going live | WpStream + @wpstream/astro: Browser or OBS/RTMP from the dashboard | YouTube embed (astro-embed): YouTube Live, on YouTube's platform |
| What you need: Recordings | WpStream + @wpstream/astro: Record this stream saves a video with its own Content ID | YouTube embed (astro-embed): Uploads on YouTube |
| What you need: Server code or webhooks | WpStream + @wpstream/astro: None on the Astro side | YouTube embed (astro-embed): None |
| What you need: Paid access on Astro | WpStream + @wpstream/astro: Not on Astro today | YouTube embed (astro-embed): No |
| What you need: Billing model | WpStream + @wpstream/astro: Plans in broadcast, viewer and recording hours | YouTube embed (astro-embed): Set by YouTube, with its player and branding |
You pay for streaming time. The Astro side adds nothing to it.
Lite
Lite, at $24 a month or $190 a year, provides 100 broadcast hours, 500 viewer hours, up to 200 viewers at once, 5 live channels, and 25 recording hours.
Viewer hours accumulate across the audience. For example, a 1.5-hour service viewed by 200 people uses 300 viewer hours.
Plus
Plus, at $59 a month or $490 a year, offers 250 broadcast hours, 2,000 viewer hours, up to 1,000 viewers at once, 15 live channels, and 100 recording hours.
Broadcast and viewer hours reset monthly. Hours count based only on time, so video quality doesn’t affect the total.
The trial
Start with a free trial: no credit card and no time limit. Every plan is listed on the pricing page. Pay-per-view isn’t available on Astro.
More on Embedding Live Video
How to Add Live Video to Shopify in 10 Minutes
Copy one Content ID from the dashboard, and your live channel or video will play.
Complete Guide to Embedding Live Streaming Videos on Your Website (2026)
Understand how live stream embeds work on a website and what to check before choosing one.
How to Stream From OBS to Your Own Website (Video Included)
Set up OBS with an RTMP URL and stream key. Follow the encoder steps for your Astro channel.
Questions about video streaming for Astro
Run npm install @wpstream/astro. Then, copy the Content ID from the Content ID for Astro tab in your WpStream dashboard. Import the component in the page frontmatter. Paste the ID into one WpStreamPlayer tag. Build and deploy. The player loads as a lazy-loaded 16:9 iframe.
The full walkthrough is in the five setup steps.
You can do both with the same component. The Content ID tells the player whether to show a live channel or recorded video. The tag looks the same either way. To go live, broadcast into the channel from the WpStream dashboard, using your camera and mic in the browser, or from OBS or another RTMP encoder. With recording on, the broadcast saves as a video.
In the WpStream dashboard. For a live channel, click Live Channels in the left sidebar. Select the channel, and in the embed card below the player, open the Content ID for Astro tab. For a recorded video, find it under Videos and use the same tab on its Share card. Click Copy code and paste the whole string unedited.
No. The WpStream component is a plain Astro component, not an island. It renders to HTML with an iframe at build time or on request and ships no JavaScript from Astro. So, there’s no client: directive to add. The video player’s code runs inside the iframe, and no UI framework is needed.
Yes. The WpStream component works in both static output and on-demand pages. It has no adapter requirements. It simply decodes the Content ID and writes an iframe. Static builds offer a bonus: a missing or broken Content ID causes a clear error message during the build, so issues appear before deployment.
Not at this time. The Astro component lacks viewer login, ticket, or entitlement checks. Anyone who opens the page can watch. Pay-per-view, paywalls, and subscriptions require the WpStream WordPress plugin, which isn’t used on Astro. Plan your streams as free to watch, or keep paid events off the Astro site for now.
For live channels, yes. Enable Lock to website in the channel’s settings and enter your Astro site’s domain. Playback will only work when the player is embedded there. Recorded videos currently have no domain lock in the WpStream dashboard.
Separately, Encrypt live stream protects a live channel’s data with signed playback URLs and AES-128 segments, but encrypted video may not display in all browsers.
WpStream plans are metered in broadcast, viewer, and recording hours, starting at $24 a month for Lite. This includes 100 broadcast hours, 500 viewer hours, and 25 recording hours. Viewer hours accumulate across the audience: a 1.5-hour service watched by 200 people uses 300 viewer hours. The Astro component adds nothing to the bill.
You can try video streaming for Astro with the free trial, needing no credit card and having no time limit.
Ready when you are
Start your free trial
Try live broadcasting and replays on your website.