gpt4 book ai didi

html - CSS随着屏幕变宽调整iframe的高度

转载 作者:行者123 更新时间:2023-11-27 23:01:11 25 4
gpt4 key购买 nike

我正在使用 bootstrap 3 网格列来调整 iframe 的宽度,但是,如果我设置 iframe 的高度,它在移动设备上太高了,如果我不设置 iframe 的高度,它是在桌面上太短了,这是我的代码

<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 嵌入看起来像这样

youtube embed screenshot

最佳答案

尝试将宽度设置为 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>

关于html - CSS随着屏幕变宽调整iframe的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58985198/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com