Question

我正在尝试在一个容器上显示多个视频，而不会在调整屏幕大小时失去长宽比。当我说多个视频时，我并不是要在较小的容器中显示它们，而是在一个大容器中显示。

这是我当前的代码。

HTML：

<div class="content">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/link1" marginwidth="50" frameborder="0" allow="accelerometer; autoplay;
        encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/link2" marginwidth="50" frameborder="0" allow="accelerometer; autoplay;
        encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS：

.content{
        grid-area: content;
        background-color: #f2f2f2;
        position: relative;
        height: 0;
        padding-bottom:56.5%;
        overflow: auto;
    }

    .content iframe{
        position: absolute;
        width: 100%;
        height: 100%;
    }

我基本上在两个<br/>之间插入了许多iframes，因此除非向下滚动，否则它仅显示第一个视频。这就是我要设计页面的方式...但是在我调整屏幕大小时通过插入<br/>更改来创建空间。如何使两个iframe之间的空间始终保持一致？我不是要在类内容中创建嵌套网格。

谢谢。

在一个容器中显示多个iframe视频。 CSS网格

0 个答案: