Plyr React

A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
Alternatives To Plyr React
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Plyr23,4142771453 days ago153April 20, 2022806mitJavaScript
A simple HTML5, YouTube and Vimeo player
React Player7,5231,08051710 days ago147September 16, 2022199mitJavaScript
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
Lightgallery5,7301222624 days ago107September 19, 202250otherTypeScript
A customizable, modular, responsive, lightbox gallery plugin.
Lightgallery.js5,22354258 months ago15October 29, 20202otherJavaScript
Full featured JavaScript image & video gallery. No dependencies
Lite Youtube Embed4,5482a month ago8March 17, 202135otherJavaScript
A faster youtube embed.
36 days ago54March 08, 202243gpl-3.0PHP
Web GUI for youtube-dl
Vime2,4441121 days ago81September 13, 2022153mitTypeScript
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Jarallax1,2481022510 days ago30March 30, 202218mitJavaScript
Parallax scrolling for modern browsers
1710 months ago24December 04, 202036JavaScript
use a custom yutube player for a video as background on jQuery framework
12 months ago53January 25, 202237apache-2.0Swift
iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links
Alternatives To Plyr React
Select To Compare

Alternative Project Comparisons

Plyr React

plyr-react logo

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
tree-shakeable side-effect free

License Code quality Build Size Version Downloads

You can see a live demo here.

Make sure to select the version for the plyr-react in the dependencies.


npm install plyr-react

# Yarn
yarn add plyr-react


Ready to use <Plyr /> component

The simplest form of react integration with the plyr is to use the <Plyr /> component, it is best for the static videos.

import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const plyrProps = {
  source: undefined, //
  options: undefined, //
  // Direct props for inner video tag (

function MyPlyrVideo() {
  return <Plyr {...plyrProps} />
Old version 4 plyr-react - The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code
- import "plyr-react/plyr.css"
+ import "plyr-react/dist/plyr.css"

Ready to use usePlyr hook

If you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple and exact Plyr component made with the usePlyr hook. Are curios about how it works follow this thread and this proposal.

const Plyr = React.forwardRef((props, ref) => {
  const { source, options = null, } = props
  const raptorRef = usePlyr(ref, {
  return <video ref={raptorRef} className="plyr-react plyr" {} />

Accessing the plyr instance using refs

// Function base component
const MyComponent = () => {
  const ref = useRef()

  useEffect(() => {
    console.log("internal plyr instance:", ref.current.plyr)

  return <Plyr ref={ref} />

// Class base component
class MyComponent extends Component {
  constructor(props) {
    this.player = createRef()

  componentDidMount() {
    console.log("internal plyr instance", this.player.current.plyr)

  render() {
    return <Plyr ref={(player) => (this.player.current = player)} />


Currently the exported APIs contains a latest instance of plyr.
In other words, the passing ref will have access to the player in the structure shown below.

return <Plyr ref={ref} />

// ref can get access to latest plyr instance with `ref.current.plyr`
ref = { current: { plyr } }

// so you can make your player fullscreen 🎉


You can fork these examples

Javascript example: stackblitz example (js)

Typescript example: codesandbox example (ts)

Basic HLS integration Codesandbox

Check out the examples directory for the useHls integration guide.

  ref={usePlyr(ref, {
    ...useHls(hlsSource, options),
  className="plyr-react plyr"


Nightly version of plyr-react:


We are open to all new contribution, feel free to read CONTRIBUTING and CODE OF CONDUCT section, make new issue to discuss about the problem Gitter, and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you can jump into it from Gitpod Ready-to-Code


If you like the project and want to support my work, give star ⭐ or fork it. Featured on Openbase


  • @realamirhe For provide help for integrate to react-aptor.
  • @iwatakeshi For provide help for convert to typescript.
Popular Vimeo Projects
Popular Youtube Projects
Popular Companies Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.