How to Play Youtube Embedded Video With Plyr.io Video Player
See Demo on Repl :- https://repl.it/@SH20RAJ/PlyrVideo#index.html
Video Documentation :-
See Latest Documentation :-
Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button :- https://codexdindia.blogspot.com/2021/05/plyrio-video-player-integration-skin-Customizing-and-Adding-Download-Button-to-plyr.html
Step 1 :- Add CDNs
1. Css CDN before </head> Tag
<!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" />
2. JS CDN before </body> Tag
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.js"></script>
Step 2 :-
Insert Your YouTube iframe Code in Between these div tags :-
(Here The main thing is to add or assign id="player" to your div element)
<div style="width: 500px;" class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/bTqVqk7FSmY"
allowfullscreen
allowtransparency
allow="autoplay">
</iframe>
</div>
Now , Your WebPage Will Look Like :-
 |
| After Adding Plyr |
 |
| Before Adding Plyr |
See Full Script Here :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plyr.io YouTube Embeded Video Player</title>
<!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.3/demo.css" />
</head>
<body>
<div style="width: 500px;" class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/bTqVqk7FSmY" allowfullscreen
allowtransparency
allow="autoplay">
</iframe>
</div>
<script src="https://cdn.plyr.io/3.6.3/demo.js"></script>
</body>
</html>
Chats During Video Making .....
Plyr.io Youtube Embedded Video Player
Integration
Steps :-
here is official demo from plyr
Let's embed a simple video from youtube ...
Here is simple embedding ...
Let's Cutomise it with Plyr ....
Steps:-
See my article '
Link in Description ........
Place iframe between div tag ..
with id = player ......
Lrt's See this .......Now
Ye Our Player Is Integrated Now ,
It's Working Too Fine ....
Thanks ......
Plyr.io YouTube Embeded Video Player
Our Answer on StackOverFlow :- https://stackoverflow.com/questions/63340764/how-to-implement-plyr-js-within-a-rails-6-site/65359662#65359662
Comments
Because the demo.css has many extra styling options
CDNs :- Checkout latest video on plyr.io topic so you can find how to get the proper styling css cdn.