移动设备上的全屏 iframe

【问题标题】：Fullscreen iframe on mobile移动设备上的全屏 iframe
【发布时间】：2022-01-30 04:04:07
【问题描述】：

我正在尝试实现来自 Youtube 的全屏 iframe 视频。它可以在网络和平板电脑上完美运行，但在移动设备上，它会保持宽高比，这并不是我真正想要的。

如果可能的话，我想去掉顶部和底部的黑色边距。这就是现在的样子。

https://i.stack.imgur.com/VQFTl.png

【问题讨论】：

【解决方案1】：

除非您旋转屏幕，否则它不会消失。或者你可以像这样使用它。

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

【讨论】：