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

Name: Plyr.io Youtube Embedded Video Player Integration
Rating: 1.3 (3065 reviews)
Author: sh20raj

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