RESPONSIVE IFRAME

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
	
	.container {
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  padding-bottom: 70%; /* 4:3 Aspect Ratio  */
	  padding-top: 25px;
	}

	/*  style the iframe with full height and width */
	iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}

</style>
</head>  
<body>
    <h2> Responsive iframes </h2>
	<div class="container">
	   <iframe src="https://www.youtube.com/embed/xoTyrdT9SZI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
</body>
</html>