Auto play button Youtubbe

Fork Preview

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.shadow {
			box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
		}
		#labelAutoplay {
			display: block;
			position: relative;
			width: 38px;
			border-radius: 15px;
			background: #93c9f3;
			height: 16px;
			transition: 0.2s;
			cursor: pointer;
		}
		#labelAutoplay .circle {
			position: absolute;
			width: 21px;
			height: 21px;
			border-radius: 50%;
			background: #2693e6;
			display: inline-block;
			top: -3px;
			left: 16px;
			transition: 0.2s;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div>
		<label for="autoplay" id="labelAutoplay">
			<span class="shadow circle" id="btnAutoplay"></span>
		</label>
		<input type="checkbox" id="autoplay" hidden checked>
	</div>
	<script>
	    'use strict';
	    let labelAutoplay = document.getElementById('labelAutoplay');
		let btnAutoplay = document.getElementById('btnAutoplay');
		let checkbox = document.getElementById('autoplay');

checkbox.onchange = function (e) {
			let check = checkbox.checked;
			console.log(check);
			if (check) {
				btnAutoplay.style.left = '16px';
				btnAutoplay.style.background = '#2693e6';
				labelAutoplay.style.background = '#93c9f3';
			} else {
				btnAutoplay.style.left = '0';
				btnAutoplay.style.background = '#fafafa';
				labelAutoplay.style.background = '#999999';
			}
		}
	</script>
</body>
</html>