<div class="example-container">
	<h2>Please pretend the box below is your browser's window</h2>
	
	<div class="example1">
		<iframe src="https://www.youtube.com/embed/KPX-oAp_LQw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
	
	<p>See how the iframe doesn't adjust the height, thus showing these ugly black bars above and below the video?</p>
	
	<p>An interesting solution for that is  wrapping the iframe in a container and using padding-bottom to control its height. Take a look at it working:</p>
	
	<div class="example1">
		<div class='aspect-ratio-16-9'><iframe src='https://www.youtube.com/embed/KPX-oAp_LQw' frameborder='0' allowfullscreen></iframe></div>
	</div>
	
</div>
iframe {
	max-width: 100%;
}

.example1 {
	position: relative;
	width: 200px;
	height: 200px;
	border: solid 4px #4b4b4b;
	border-radius: 4px;
	margin-bottom: 20px;
}

.aspect-ratio-16-9 { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	iframe {
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
	}
} 


/* Exemple page styles */

* {
	box-sizing: border-box;
}

h2 {
	font-family: sans-serif;
	font-size: 28px;
	margin-bottom: 20px;
}

p {
	font-family: sans-serif;
	font-size: 18px;
	margin-bottom: 20px;
}

.example-container {
	margin-bottom: 100px;
}

body {
	padding: 50px;
	color: #4b4b4b;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.