init

web_parts/footer.php

@@ -0,0 +1,83 @@
+<div class="video-controls">
+	<div class="video-controls-inside">
+		<div class="label">
+			8 Bit music, Pumped Up Kicks | Centuries | All Star
+		</div>
+		<div class="controls">
+			<ul>
+				<li>
+					<i id="mute"
+					   class="fa"
+					   onclick="toggleMute()"
+					   aria-hidden="true"></i>
+				</li>
+				<li>
+					<i id="play"
+					   class="fa"
+					   onclick="togglePlay()"
+					   aria-hidden="true"></i>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+<script>
+	let playing = false;
+	let muted = false;
+	const video = document.getElementById( 'video' );
+	const playBtn = document.getElementById( 'play' );
+	const muteBtn = document.getElementById( 'mute' );
+
+	function play() {
+		playing = true;
+		video.play();
+		playBtn.classList.add( 'fa-pause-circle-o' );
+		playBtn.classList.remove( 'fa-play-circle-o' );
+	}
+
+	function stop() {
+		playing = false;
+		video.pause();
+		playBtn.classList.remove( 'fa-pause-circle-o' );
+		playBtn.classList.add( 'fa-play-circle-o' );
+	}
+
+	function mute() {
+		muted = true;
+		video.muted = true;
+		muteBtn.classList.add( 'fa-volume-off' );
+		muteBtn.classList.remove( 'fa-volume-up' );
+	}
+
+	function unmute() {
+		muted = false;
+		video.muted = false;
+		muteBtn.classList.remove( 'fa-volume-off' );
+		muteBtn.classList.add( 'fa-volume-up' );
+	}
+
+	function togglePlay() {
+		if ( playing ) {
+			stop();
+		} else {
+			play();
+		}
+	}
+
+
+	function toggleMute() {
+		if ( muted ) {
+			unmute();
+		} else {
+			mute();
+		}
+	}
+
+	setTimeout( () => {
+		mute();
+		play();
+	}, 500 );
+</script>
+
+</body>
+</html>