JSFiddle - React, Tailwind, and code Playground

by ufuri

HTML

<div id="container">
	<div id="menu"><?php include "shared/menu.php"; ?></div>
	<div id="mainbody">
       <div class="video-container"></div>
    </div>
</div>

CSS

.video-container{
    width:560px; 
    height:315px;
    border-width:1px;	
    border-style:solid;
	border-color:#000;
}

@media (max-width: 600px) {
.video-container {
	width:285px;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
}
@media (max-width: 960px) {
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

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