JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
    <div class="row">
        <div class="card l-m-t">
			<div class="youtube-wrapper">
				 <iframe class="youtube-video" src="https://www.youtube.com/embed/videoseries?list=PLDpWUwLetNwNNANxKq8byaccYhJajsDeh" frameborder="0" allowfullscreen=""></iframe>
			</div>
        </div>
    </div>
	<div class="row l-m-t">
		<div class="card">
			<h2>STEAM STUFF</h2>
		</div>
	</div>
	<div class="row l-m-t">
		<div class="card">
			<h2>FOOTER STUFF</h2>
		</div>
	</div>
</div>

SCSS

$grid-space: .9375rem;
$body-color: #2b2b2b;


body {
    background: $body-color;
    font-family: sans-serif;
    color: $font-color;
}

.container {
    max-width: 31.25rem;
    padding-left: $executive-space;
    padding-right: $executive-space;
    margin-left: auto;
    margin-right: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -$executive-space;
    margin-right: -$executive-space;
}

.youtube-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.youtube-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.card {
    flex: 1;
    min-height: 1px;
    padding-left: $executive-space;
    padding-right: $executive-space;
    position: relative;
}

.l-m-t {
	margin-top: 1rem;
}