如何在不使用div的情况下使iframe响应？

Question

我从这篇文章(使iframe响应)中了解到,通过在iframe周围添加一个带有类的容器来使iframe响应,例如,

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

是否有可能<iframe>...</iframe>直接嵌入我的帖子(不使用<div>...</div>)？我尝试了这些解决方案,但所有这些解决方案都不起作用.

PS:我在WordPress中使用两列布局.视频比例可以是16:9(来自YouTube),4:3(来自腾讯)等.这是一个临时演示.

Answer 1

如果您可以使用在没有额外包装元素的情况下可行的视口单元.

整页宽度:

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

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

半页宽度:

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

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