Untitled

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Spielebahn's Stream</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Just some random website, move on...">
		<meta charset="UTF-8">
		<link rel="stylesheet" href="/style/style.css">
		<script src="/script/pageVisibilityAPI.js"></script>
		<link rel="icon" href="/media/favicon.ico" type="image/x-icon">
	</head>
	<body>
		<header>
			<a href="/" id="logo"></a>
			<nav>
				<a href="#" id="menu-icon"></a>
				<ul>
					<li>
						<a href="/member">Members</a>
					</li>
					<li>
						<a href="/why">Why 'Five'?</a>
					</li>
					<li>
						<a href="/stream">Stream</a>
					</li>
					<li id="discord_app">
						<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Discord</a>
					</li>
					<li id="NavBarBorder">
						<a class="menuLink" href="/wiki/Hauptseite">Wiki</a>
					</li>
					<li id="discord_link">
						<a href="https://discord.gg/RVvMcDk">Discord</a>
					</li>
				</ul>
			</nav>
		</header>
		<main>
			<!-- Twitch embedding stuff -->
			<script src="https://player.twitch.tv/js/embed/v1.js"></script>
			<div class="cd-fixed-bg text">
				<!-- Display -->
				<div class="grid-container" id="StreamSizeHelper">
					<div id="stream_container">
						<div id='twitch_stream'></div>
					</div>
					<div id="twitch_Chat">
						<!-- Twitch Chat -->
						<iframe
							id="chat_embed"
							src="https://www.twitch.tv/embed/spielebahn/chat">
						</iframe>
					</div>
					<div id="youtube_chat">
						<!-- Youtube Live Chat embed -->
						<iframe id="YoutubeChatiFrame" allowfullscreen="" src="https://www.youtube.com/live_chat?v=Wsm7vIJQSrg&embed_domain=groupfive.de"></iframe>
					</div>
					<div id="Stream_Switch">
						<button onclick="StreamSwitch()">Stream wechseln (Twitch/Youtube)</button>
					</div>
				</div>
			</div>
			<script>
			// Twitch Stream settings
			function TwitchStreamJS() {
				// Get the ViewPort Width
				var ViewPortWidth = document.documentElement.clientWidth;
				// If as wide as HD place chats to the left of the stream (chats need 320px each)
				if (ViewPortWidth >= 1240) {
					var StreamWidth = ViewPortWidth - 640;
				// If not make the stream use the full width
				} else {
					// Force Scrollbar
					document.getElementById('Stream_Switch').setAttribute("style","height:100000px");
					// Figure out stream width with scrollbar
					var ViewPortWidth = document.getElementById('StreamSizeHelper').offsetWidth;
					// Get rid of scrollbarhelper
					document.getElementById('Stream_Switch').setAttribute("style","height:null");
					var StreamWidth = ViewPortWidth;
				}
				// Calc stream height
				var StreamHeight = StreamWidth / ( 16 / 9 );
				// Set the stream options
				var options = {
					height: StreamHeight,
					width: StreamWidth,
					channel: "spielebahn"
				};
				// Initialize stream player
				var player = new Twitch.Player("twitch_stream", options);
				player.setVolume(0.5);
			}

			// Initialize Twitch Stream
			TwitchStreamJS();

			// Set default stream
			var CurStream = "twitch";

			// Stream Switch
			function StreamSwitch() {
				// Compare Stream
				if (CurStream == "twitch") {
					CurStream = "youtube";
					// Get the ViewPort Width
					var ViewPortWidth = document.documentElement.clientWidth;
					// If as wide as HD place chats to the left of the stream (chats need 320px each)
					if (ViewPortWidth >= 1240) {
						var StreamWidth = ViewPortWidth - 640;
					// If not make the stream use the full width
					} else {
						// Force Scrollbar
						document.getElementById('Stream_Switch').setAttribute("style","height:100000px");
						// Figure out stream width with scrollbar
						var ViewPortWidth = document.getElementById('StreamSizeHelper').offsetWidth;
						// Get rid of scrollbarhelper
						document.getElementById('Stream_Switch').setAttribute("style","height:null");
						var StreamWidth = ViewPortWidth;
					}
					var StreamHeight = StreamWidth / ( 16 / 9 );
					document.getElementById('stream_container').innerHTML = "<iframe id='youtube_stream' class='stream' width='" + StreamWidth + "' height='" + StreamHeight + "' src='https://www.youtube.com/embed/Wsm7vIJQSrg'></iframe>";
				} else {
					CurStream = "twitch";
					document.getElementById('stream_container').innerHTML = "<div id='twitch_stream'></div>";
					TwitchStreamJS();
				}
			}
			</script>
			<!-- discord stuff - WHAT THE FUCK IS WRONG WITH ME!? -->
			<iframe id="light" class="white_content" src="https://discordapp.com/widget?id=196377584143958016&theme=dark" width="350" height="500"></iframe>
			<div id="fade" class="black_overlay" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>
		</main>
	</body>
</html>