A simple YouTube embedded Live Stream for websites using plyr.io
Script Source https://github.com/sampotts/plyr
A Pen by Mehluli Hikwa on CodePen.
Created
September 16, 2022 00:28
-
-
Save Jonah2016/e5605ddd5ea10857c7f895a156f265b7 to your computer and use it in GitHub Desktop.
YouTube Live Streaming
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="player-container"> | |
| <h2 id="offline"> | |
| <i class="fa fa-circle"></i> Stream on Pause | |
| </h2> | |
| <h2 id="online"> | |
| <i class="fa fa-circle blinker"></i> Now Streaming Live | |
| </h2> | |
| <div id="liveStream" | |
| data-plyr-provider="youtube" | |
| data-plyr-embed-id="5qap5aO4i9A"> | |
| </div> | |
| </div> | |
| <!-- | |
| LIVE YOUTUBE CHANNELS by ID's | |
| Skynews, ID = 9Auq9mYxFEE | |
| lofi hip hop radio, ID = 5qap5aO4i9A | |
| --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const player = new Plyr('#liveStream', { | |
| ratio: '16:9', | |
| }) | |
| const offline = document.getElementById("offline") | |
| const online = document.getElementById("online") | |
| online.style.display = "none" | |
| offline.style.display = "block" | |
| player.on('playing', event => { | |
| offline.style.display = "none" | |
| online.style.display = "block" | |
| }) | |
| player.on('pause', event => { | |
| offline.style.display = "block" | |
| online.style.display = "none" | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"></script> | |
| <script src="https://unpkg.com/plyr@3"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --plyr-color-main: #05ad12; | |
| --plyr-control-icon-size: 30px; | |
| --plyr-range-track-height: 10px; | |
| body { | |
| background: #010819; | |
| color: white; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .player-container { | |
| margin: 0 auto; | |
| max-width: 700px; | |
| #offline i { | |
| color: #ad0505; | |
| } | |
| #online { | |
| display: none; | |
| i { | |
| animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate; | |
| color: #05ad12; | |
| } | |
| @keyframes blinker { | |
| from { opacity: 1; } | |
| to { opacity: .2; } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://unpkg.com/plyr@3/dist/plyr.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment