如何在 2x2 网格中嵌入四个 YouTube 视频（16:9 响应式），根据屏幕尺寸，该网格可以变成 1x4 网格？

问题描述 投票：0回答：2

我正在尝试在空间有限的 HTML 页面中嵌入四个 YouTube 视频。根据屏幕尺寸，我希望将它们排列在 2x2 网格中，但如果屏幕尺寸不允许，则可以折叠成 1x4 网格。我还尝试使视频尺寸以 16:9 的宽高比响应，并具有最小和最大尺寸。

我得到的最接近的是使用研究网络和这个网站的一些代码。然而，无论我发现什么，我似乎都无法实现我的全部目标。要么我能够将 2x2 网格折叠成 1x4，但我会丢失嵌入纵横比和边距。或者我可以得到一个只有边距的 1x4 网格，但屏幕越宽，视频之间的空间就越大，因为 padding-bottom: 56.25%。这是我最近的尝试：

.vid-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  }

.vid-cell {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 10px;
}

.vid-cell embed, iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    max-height: 315px;
    max-width: 560px;
}

<html>
<body>
<div class="vid-container">
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid1"></iframe></div>
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid2"></iframe></div>
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid3"></iframe></div>
<div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid4"></iframe></div>
</div>
</body>
</html>
html css responsive embed aspect-ratio
2个回答
0
投票

这个是你想要的效果吗？如果没有，请编辑您的问题以使您的要求更清楚。

（代码如下所示。我创建了一个测试页面而不是代码片段，因为 YouTube 嵌入在代码片段中无法正常工作。）

<!doctype html>
<html>
<head>
<style>
body {
  margin: 1em;
}
.vid-container {
  display: grid;
  grid-template-columns: auto;
  gap: 1em;
}
@media (min-width: 1000px) {
  .vid-container {
    grid-template-columns: 1fr 1fr;
  }
}
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>
</head>
<body>
<div class="vid-container">
<iframe src="https://www.youtube.com/embed/NXN33_E-R3k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5gMa8Fcgoc4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/2-BMxNC8cD8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/xmeS2CTGSgs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</body>
</html>
0
投票

布雷特，这真的很有帮助，而且见解很有趣，因为我也在寻找一些帮助。您能否建议是否有一种方法也可以创建容器来以 4 x 4 格式或 4 x 1 格式显示视频，甚至将数量减少到奇数，您需要创建哪些代码更改？任何帮助或见解将不胜感激。 GW

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.