Skip to main content

Plyr.io Youtube Embedded Video Player Integration


How to Play Youtube Embedded Video With Plyr.io Video Player 


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" />
HTML


    2. JS CDN before </body> Tag

<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.js"></script>
HTML


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>
HTML


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>
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 ......
HTML




Plyr.io YouTube Embeded Video Player

00:00
00:00


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


Labels

Labels:

Comments

  1. Deeni AkhbarDecember 5, 2021 at 11:41 PM

    I have an Problem After Adding the HTML CODE background gets White or Blue i want to remove that Background

    ReplyDelete
    Replies
    1. ShMarch 26, 2022 at 5:39 PM

      Try using cdnjs CDNs instead of demo.css
      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.

      Delete
  2. DeerLuckJanuary 19, 2022 at 7:34 PM

    Thanks! It's just what I was looking for

    ReplyDelete
  3. ..February 15, 2022 at 9:34 PM

    How to add embed video from Goggle Drive?

    ReplyDelete
  4. cesarJune 1, 2023 at 8:05 AM

    ¿se puedo agregara una lista de videos a este reproductor ?

    ReplyDelete

Post a Comment

Random Posts