How to implement plyr.js within a Rails 6 site?

Question

https://plyr.io/ is a javascript library to play videos with support for YouTube and Vimeo. I'm trying to implement it within a Rails 6 site. What are the steps to make this happen?

Answer 1

Rails 6 using webpacker to manage their assets, to install plyr you just need install it through package manager:

yarn add plyr

then you can require it in your js file like the docs:

import Plyr from 'plyr';
 
const player = new Plyr('#player');

make sure you have run webpacker dev server, if not you may getting module not found. Hope this help, correct me if there is any mistake.

Answer 2

There are many ways to including the plyr.js to your project and then use it.

I'm covering one of the methods to include plyr.js into your project:

Step 1. Download Plyr.js from its website or from the cdn link https://cdn.plyr.io/3.6.2/plyr.js

Step 2. Place the plyr.js file inside app/assets/javascripts folder

Step 3. You need to mention plyr.js in your manifest file so it can be used in your app. Add the following line (without the extension) to your manifest file (app/assets/javascripts/application.js)

//= require plyr

Now Plyr js available to you for usage and can be used as usual. You can create <video> tags inside your erb to bring up the player.

Eg.

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />
</video>