JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<!DOCTYPE html PUBLIC>

<html>
	<head>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/embedTwitchCSS.css" />

		<title>Example embedded stream/chat</title>
		<meta name ="description" content="An example of embedding a twitch stream with chat beside it"/>
	</head>
	<body>
		<div class='wrapper'>
			<div class='twitchWrapper'>
				<div class='twitchStream'>
					<iframe src="https://player.twitch.tv/?channel=quiok" frameborder="0" scrolling="no"></iframe>
				</div>
				<div class='twitchChat'>
					<iframe frameborder="0" scrolling="no" src="https://www.twitch.tv/embed/quiok/chat"></iframe>
				</div>
			</div>
		</div>
	</body>
</html>

CSS

body{
	background-color: #202020;
}

.wrapper
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:90%;
}

/* This file is strictly so the demo index page doesn't look so bad. Please ignore! */

.twitchWrapper {
	position: relative;
}

.twitchStream {
	position: relative;
	width:75%;
}

.twitchStream:before{
	content: "";
	display: block;
	padding-top: 56.25%; /* 16:9 */
}

.twitchChat{
	position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
	width: 25%;
}

.twitchStream iframe, .twitchChat iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 1024px) {
	.twitchStream{
		width:100%;
	}
	.twitchChat{
		display:none;
	}
}