CSS会随着屏幕变宽来调整iframe的高度

Question

我正在使用Bootstrap 3网格列来调整iframe的宽度，但是，如果我设置iframe的高度，那么在移动设备上它就很高了，如果我不设置if​​rame的高度，那就是在台式机上太短了，这是我的代码

<iframe class="col-xs-12 col-sm-12" src="https://www.youtube.com/embed/<?= $hash ?>" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

如何为不同分辨率自动增加iframe的高度？

编辑

通过height: auto，youtube嵌入看起来像这样

Answer 1

尝试将宽度设为100％，将自动高度设为100％。也许，尝试将其移到单独的类中，因为下面以内联css为例：

<iframe style="width: 100%; height: auto;" src="https://www.youtube.com/embed/<?= $hash ?>" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>