YOUTUBE PLAYER
What I want to do is to turn a classic youtuber player into a branded player without ads and youtube subtitles.
I already have a ready-made player that does most of these functions. (I worked via plyr.io code) I would now add functions like:
1. Autoplay ( ON-OFF )
2. Control Bar ( ON-OFF )
3. Custom Thumbnail ( Via URL )
4. Embed
5. Muted Autoplay
6. Control Bar Color
7. Progress Bar Color ( Play button circle color)
8. Widht/Height
MY YOUTUBE PLAYER WITH PLYR.IO CODE:
JUST PLAYER CODE WITH THUMBNAIL:
<head>
<script src=”https://cdn.plyr.io/3.5.6/plyr.js“></script>
<link rel=”stylesheet” href=”https://cdn.plyr.io/3.5.6/plyr.css” />
</head>
<body>
<div class=”w”>
<div id=”player” data-plyr-provider=”youtube” data-plyr-embed-id=”i6tb5h5rCVg” controls crossorigin playsinline poster=”https://lizaeight.com/wp-content/uploads/2021/10/Klikni-Da-Pogledas.gif“>
</div>
</div>
<script>
const players = Plyr.setup(‘#player’);
// const player = new Plyr(‘#player’, {
// title: ‘Example Title’,
// });
// player.play();
// const player1 = new Plyr(‘#player1’);
player.play();
</script>
</body>
<style>
.plyr–full-ui input[type=range] {
-webkit-appearance: none;
color: #bf19de;
}
.plyr–video .plyr__control.plyr__tab-focus, .plyr–video .plyr__control:hover, .plyr–video .plyr__control[aria-expanded=”true”] {
background: #cb6ce6;
color: #fff;
}
.plyr–video .plyr__control.plyr__tab-focus, .plyr–video .plyr__control:hover, .plyr–video .plyr__control[aria-expanded=true] {
background: #cb6ce6;
color: #fff;
}
.plyr__control–overlaid {
background: rgb(203 108 230 / 77%);
padding: 30px;
}
.plyr iframe[id^=youtube] {
top: -50%;
height: 200%;
}
iframe {
pointer-events: none;
}
</style.
ABOVE CODE LIVE:
FULL CODE PLAYER LIVE
All links related to plyr.io code that can help you and make the process easier:
https://github.com/sampotts/plyr
https://visualdev.fm/post/customizing-media-players-with-plyr-io
https://github.com/yoriiis/create-youtube-player
https://blog.bodum.com/user/vendor/plyr/readme.md
You can find all these functions (color change, embed, thubmnail) as they look in this video below:
Everything like that software has … it uses that “Convert YT Video To Branded Player” style!
Prestoplayer uses Plyr.io all functions as well as muted autoplay, chapters ... etc ..
MUTED AUTOPLAY
So far you could see what all the features look like ( all like killer player ) , but I want to stick to this muted autoplay.
I wish people could change the design of muted autoplay.
Specifically, that people can add a play button (optional) as a mutedautoplay or a thumbnail in the upper left corner as in clickfunnels.
Sign up here for this software, it has muted autoplay for YT and Vimeo. You have a video below!
https://app.converzee.com/Dashboard
mail: [email protected]
pass: 5y9k1029
Muted Autoplay ExampleLinks: https://expertsecrets.com/getesfree-1
Main video PLYR.IO code muted autoplay example: https://prestoplayer.com/
Muted autoplay from this software:
https://truerainmaker.thrivecart.com/thrive-cart-bundle-copy-2/
Muted autoplaz is preview a normal video playing with just a mute.
i mean like the video is running without any sound
and once the person clicks play button then the video starts again from starting point with sound.
Here’s even a tutorial on how to make muted YT autoplay like in Clickfunnels!
CLARITY
I literally want to do everything like Killer Player + add a mutedautoplay feature like Prestoplayer and Clickfunnels have.
And I want people to have the option to be able to design muted autoplay as with the video above!
If you have any more questions, feel free to ask!