How to make video iframe responive?

Anthony

9 years ago

How to make video iframe responive? Copy the CSS below and make sure that there is a ” iframe-wrap ” before the iframe element.

CSS

.iframe-wrap { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 
.iframe-wrap iframe, 
.iframe-wrap object, 
.iframe-wrap embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

HTML

<div class='iframe-wrap'>
	<iframe src='https://www.youtube.com/embed/xRM99Srkvas' frameborder='0' allowfullscreen></iframe>
</div>