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

Deeni Akhbar said…
I have an Problem After Adding the HTML CODE background gets White or Blue i want to remove that Background
December 5, 2021 at 11:41 PM
DeerLuck said…
Thanks! It's just what I was looking for
January 19, 2022 at 7:34 PM
.. said…
How to add embed video from Goggle Drive?
February 15, 2022 at 9:34 PM
Sh said…
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.
March 26, 2022 at 5:39 PM
cesar said…
¿se puedo agregara una lista de videos a este reproductor ?
June 1, 2023 at 8:05 AM
Post a Comment

Popular posts from this blog

How to Get Free Unlimited Bandwidth and Storage Using jsDelivr and GitHub

How to Get Free Unlimited Bandwidth and Storage Using jsDelivr and GitHub Are you tired of paying for expensive content delivery networks (CDNs) and storage solutions for your web projects? Look no further! In this guide, we'll show you how to leverage jsDelivr and GitHub to get free unlimited bandwidth and storage. Whether you're a seasoned developer or just getting started, this solution will save you money and improve the performance of your web projects. What is jsDelivr? jsDelivr is a free, fast, and reliable CDN for open-source files. It provides a convenient way to serve your static assets (like JavaScript, CSS, images, and more) with the benefits of a global CDN, including faster load times and unlimited bandwidth. What is GitHub? GitHub is a popular platform for version control and collaboration. It allows you to host your code repositories and manage your projects with ease. By combining GitHub with jsD...
Post a Comment
Read more

Best VS Code extensions for developers in 2024

Here are some of the best VS Code extensions for developers in 2024, including a range of productivity tools, debuggers, and visual enhancements to streamline your coding workflow. Additionally, you'll find some popular themes to customize your editor's appearance. Top VS Code Extensions for Developers in 2024 Shade Theme by SH20RAJ Enhance your code readability with this well-designed theme, perfect for long coding sessions. Shade Theme Prettier A widely used code formatter that ensures your code is styled consistently across your projects. Prettier GitLens Provides rich visualizations and insights into your Git repository, helping you understand code changes and history. GitLens Auto Rename Tag Automatically renames paired HTML/XML tags, reducing errors and saving time. Auto Rename Tag Bracket Pair Colorizer Colors matching brackets to improve code readability, especially useful for complex nested structures. Bracket Pair Colorizer CSS Peek...
Post a Comment
Read more

Top 50 Useful Regex Patterns

Title: Mastering Regular Expressions in JavaScript: Top 50 Useful Regex Patterns Introduction: Regular expressions (regex) are a powerful tool for pattern matching and text manipulation in JavaScript. Whether you're validating user input, extracting data from strings, or replacing text, regex can streamline your coding tasks. In this article, we'll explore 50 useful regex patterns that every JavaScript developer should know. These regex patterns cover a wide range of common scenarios, from validating email addresses to parsing URLs and beyond. 1. Validating Email Addresses: const emailRegex = /^[ \w -]+( \. [ \w -]+)*@([ \w -]+ \. )+[a-zA-Z]{2,7}$/; 2. Validating URLs: const urlRegex = /^(https?: \/ \/ )?([ \d a-z.-]+) \. ([a-z.]{2,6})([/ \w .-]*)* \/ ?$/; 3. Validating Dates in YYYY-MM-DD Format: const dateRegex = /^ \ d {4} - \ d {2} - \ d {2} $/; 4. Validating Phone Numbers (US Format): const phoneRegex = /^ \ ( ?( \ d {3} ) \ ) ?[- ]?( \ d {3} )[- ]?( \ d {4} )...
Post a Comment
Read more

Random Posts