html - 嵌入具有 9:16 比例全宽和全高的 YouTube 视频 - iframe api

Question

我想使用 iframe api 在移动应用程序（Flutter - inAppWebView 插件）上以 9:16 的比例嵌入 youtube 视频。我已经成功地以 16:9 的比例嵌入了 youtube 视频，但我想像在 tik-tok 视频应用程序提要中一样，以 potrait 模式（9:16）覆盖我的视频整个移动设备的高度和宽度。

我尝试了许多 CSS 技巧，但结果很糟糕。是否有任何 css 技巧可以帮助解决我的问题。我希望我的输出视频与下图完全相同。

链接：预期的视频输出

这是我的 iframe 代码，

<iframe class="video" id="player"  type="text/html" src="https://www.youtube.com/embed/qHFCMgLhp9s" frameborder="0" allowfullscreen></iframe>

标签： htmlcssiframeyoutube-apiyoutube-iframe-api

Answer 1

。视频 {
     纵横比：16/9
}