Getting Started

React Installation Guide

Instructions to get your player installed and on-screen using React.

1. Select Framework

JavaScript

Angular

React

Svelte

Vue

Solid

Web Components

CDN

2. Select Provider

3. Select Styling

A layout refers to the arrangement and presentation of various player components. The CSS and Tailwind CSS options below are if you want to style components from scratch and build your own layout. The Default Theme option is if you want to build your own layout on top of our component styles. Finally, the Default and Plyr layouts are our production-ready templates to get you up and running quickly.

4. Install Packages

terminal

5. Import Styles

6. Import Components

7. Player Markup

jsx

8. Poster (Optional)

See the Poster component for how to display an image while video content is loading, or until the user hits play. If this is not included, the first frame of the video will be used instead.

9. Playsinline (Optional)

The playsinline property will indicate that video content should be played inline (on mobile only), rather than launching the video in fullscreen mode on play. In addition, setting this property will also ensure custom player UI is displayed on iPhone when playing inline (hidden in fullscreen mode as native controls are forcefully displayed by the browser).

Important to note, we normalize the playing inline behaviour across all mobile browsers. If you do not set playsinline, the video will launch in fullscreen on play in all mobile browsers, not just iOS Safari where the attribute is accepted.

10. Media Icons (Optional)

You can skip this step since you're using the Default Layout.

11. Examples

You should be all set up by this point. We recommend exploring our 👉 examples to learn how to start building and customizing your player. You can also use the examples to make sure you’ve set everything up correctly.

12. Next Steps

From here you’re free to explore the library.

Scan over the remaining docs pages to get a good overview of how the library works.
Explore the API and Components references.
Check out the Default Layout or Plyr Layout pages if you’re using them.
See the Tailwind Plugin if you’re using Tailwind CSS and building your own layout.

Lastly, remember you’re not alone. You can reach out for help or to talk with other developers using Vidstack: