Plyr.io Youtube Embedded Video Player Integration

Sh Raj - Jan 31 - - Dev Community

https://codexdindia.blogspot.com/2020/12/plyrio-youtube-embedded-video-player.html


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



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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .