YouTube Live Streaming

index.html

<div class="player-container">
	<h2 id="offline">
		<i class="fa fa-circle"></i>&nbsp; Stream on Pause
	</h2>
	
	<h2 id="online">
		<i class="fa fa-circle blinker"></i>&nbsp; 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 

-->

script.js

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"
})

scripts

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

style.scss

: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; }
			}
		}
	}
}

styles

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

youtube-live-streaming.markdown

YouTube Live Streaming

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.

License.