See Full Article Here :- https://codexdindia.blogspot.com/2020/12/plyrio-youtube-embedded-video-player.html
December 17, 2020 How To, HTML5, Plyr, Top Reveals, Trending, Video Player
How to Play Youtube Embedded Video With Plyr.io Video Player
Video Documentation :-
Step 1 :- Add CDNs
1. Css CDN before </head> Tag
<! — Docs styles →
<link rel=”stylesheet” href=”https://cdn.plyr.io/3.6.3/demo.css" />
2. JS CDN before </body> Tag
<script src=”https://cdn.plyr.io/3.6.3/demo.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 ……
See Demo Here :-
Plyr.io YouTube Embeded Video Player
Play
00:00
-07:41
Mute
Settings
Enter fullscreen
Play
Here Raw File Used in this Video :- https://github.com/LoveShade/YT-Channel-Files/blob/main/Plyr.io/plyr.html
Our Answer on StackOverFlow :- https://stackoverflow.com/questions/63340764/how-to-implement-plyr-js-within-a-rails-6-site/65359662#65359662
