<div class="post--content">
  <p>This is the content of your post.</p>
  <p>When suddenly, a wild iframe appears:</p>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/TXCjEKpwtRc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <p>And the post continues...</p>
  <p><strong>Note:</strong> You can swap <code>width</code> and <code>height</code> for <code>max-width</code> and <code>max-height</code> so the size is not always enforced</p>
</div>

:root {
  --margin: 2rem;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body code {
  background: lightgrey;
  padding: 1px 3px;
  border-radius: 3px;
}

.post--content {
  padding: 0 var(--margin);
  max-width: 100%;
}

iframe {
  width: calc(100vw - (var(--margin) * 2));
  height: calc((100vw - (var(--margin) * 2)) / 1.7778);
}