how to hide / mask data-plyr-provider from html code

I’m not sure i really need to write this down here but there is no offical way to pass an attributes directly into Plyr constructor.

So what you can you fork it your own then change the lines like following: on plyr.js inside src/js/plyr.js close the lines: #201, #205 and add:

this.provider = 'youtube'; // on line #202

In this way you can create Plyr’s from “div” source.

iframe is gonna stay as it is. If you provide iframe it’s gonna work as it is.

After all:

npm run build

Create your own build and then use the plyr.min.js from your dist folder with following:

<div id="player" data-plyr-id="https://www.youtube.com/watch?v=SF0w2B6DNUE"></div>
const player = new Plyr('#player');

// Expose player so it can be used from the console
window.player = player;

There you go. An un-offical way to create a plyr specs to youtube online with div creator =)

Update #1:

Just before changes, please checkout to last production build. It may gets broken when you just do it on master branch =)

Update #2: So since you told me that you don’t know how to do it, I’ll try to explain.

So first thing first, please go visit https://github.com/sampotts/plyr

Copy the link from image: enter image description here

After this;

  • Open a terminal and your code path.
  • type git clone https://github.com/sampotts/plyr.git
  • Wait until it’s finish and type cd plyr
  • Install dependencies with npm i
  • open the current directory with some IDE (can be vscode, sublime or whatever you use for coding.) (code . will open it with VSCode)

After that open the file from the next picture:

enter image description here

Go to line #202 and you wil see following: enter image description here

On here if you look up you will see this part of code is actually for type div anyway. As you can see there you get the provider from the line #201:

this.provider = this.media.getAttribute(this.config.attributes.embed.provider)

So comment this line(#201) out and add the following to line #202

this.provider = 'youtube';

And also don’t forget to comment line #204 which gives us to end result of:

enter image description here

After these changes, (I believe you have node installed)

  • Save the changes you have made.
  • Open the terminal again.
  • checkout the last production build with git checkout v3.6.2
  • add changes to git via git add .
  • create a commit with git commit -m "provider set to youtube only"
  • then build the code with npm run build

After these steps, you will have the builded code from your js and css files from dist folder.

Please Backup your js files before doing following:

  • Copy the required files from dist/ folder to your server. (plyr.min.js and plyr.css)
  • After everyting you have done,

You should be able to use everything from top. enter image description here

I hope you could finally use it =)

Update #3:

Lets also add the dirty way of doing it from @Steve

@Radek, if you go this route, you should go through all the steps if you have time, but if you’re looking for something quick and dirty, you can search plyr.min.js for

this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider)

and replacing it with

this.provider='youtube'

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top