<h1 style="text-align: center; color: #fff; background: royalblue; margin: 0; padding: 30px 0;">
  Responsive IFrame Methods
</h1>
<section class="padding-top-method">
  <h2>Padding-Top Method</h2>
  <div class="wrappers-wrapper">
    <div class="iframe-wrapper">
      <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY">
      </iframe>
    </div>
  </div>
</section>
<section class="aspect-ratio-method">
  <h2>Aspect-Ratio Method</h2>
  <h4>No Firefox Support as of March, 2021</h4>
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY">
  </iframe>
</section>
<section class="viewport-width-method">
   <h2>Viewport Width Method</h2>
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY">
  </iframe>
</section>
.padding-top-method .wrappers-wrapper {
  width: 100%;
  max-width: 700px;
}

.padding-top-method .iframe-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.padding-top-method iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.aspect-ratio-method iframe {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 700px;
}

.viewport-width-method iframe {
  width: calc(100vw - 30px);
  height: calc((100vw - 30px) * 0.5625);
  max-width: 700px;
  max-height: calc(700px * 0.5625);
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 15px;
}

.padding-top-method {
  background: conic-gradient(from -90deg at 50% -25%, blue, blueviolet);
}

.aspect-ratio-method {
  background: conic-gradient(
    from -0.5turn at bottom right,
    deeppink,
    cyan,
    rebeccapurple
  );
}

.viewport-width-method {
  background: conic-gradient(
    from 90deg at 50% 125%,
    #1f005c,
    #003298,
    #005ac6,
    #007fdc,
    #00a2d3,
    #00c4ae,
    #00e474,
    #00ff00,
    #1f005c,
    #003298,
    #005ac6,
    #007fdc,
    #00a2d3,
    #00c4ae,
    #00e474,
    #00ff00
  );
}

h2 {
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

.aspect-ratio-method h2 {
  margin-bottom: 0;
}

h4 {
  font-style: italic;
  color: red;
  margin-top: 10px;
  font-size: 0.8rem;
}

body {
  margin: 0;
  padding: 0;
  font-family: Chalkduster;
}

iframe {
  border: 0px;
}

h1 {
  font-size: 3rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.