How do I make iframes responsive without using div?

Question

I learnt from this post (Making an iframe responsive) that make an iframe responsive by adding a container with a class around the iframe, for instance,

<div class="intrinsic-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>

Is there possible to embed <iframe>...</iframe> directly in my posts (without using <div>...</div>)? And I tried these solutions, but all of them don't work.

PS: I use two columns layout in WordPress. The ratio of video can be 16:9 (from YouTube), 4:3 (from Tencent), etc. Here is a temporary demo.

Answer 1

If you can use viewport units that is doable without an extra wrapper element.

Full page width:

iframe {
  width: 100vw;
  height: 56.25vw; /*16:9*/
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

Half page width:

iframe {
  width: 50vw;
  height: 28.125vw; /*16:9*/
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>