移动设备上 YouTube 视频库的布局问题

Question

我无法解决 YouTube 视频库的布局问题：我正在使用 this CodePen 的代码，它也存在问题。视频库在桌面设备上按预期运行（视频在左，播放列表在右）。在移动设备上，播放列表移动到视频下方。然而，现在在播放列表出现之前，视频下方有一个很大的、不需要的空间。事实上，在 CodePen 上，它在较小的显示尺寸上根本不显示播放列表。

我在这里超出了我的深度（我只是一个音乐家，试图呈现一些歌曲，有一些旧的 html 背景）所以我用 ChatGPT 4 尝试了很多个小时以下的事情（这没有用，但也许是因为人工智能或我所犯的任何错误，为了完整性而列在这里）：

• 调整视频容器的CSS规则：尝试将max-height和overflow:hidden应用于视频容器，但这没有效果。

• 检查周围容器：周围容器似乎设置正确，对其进行更改并没有解决问题。

• 使用显示：无：尝试将非活动视频设置为显示：无以将它们从布局流中删除，但这也没有帮助。

.video {
  display: none;
}
#video-1:checked ~ .video-1,
#video-2:checked ~ .video-2,
{
  display: block; /* Or display: flex */
}

• 使用开发者工具进行检查：使用 Firefox 的开发者工具进行检查表明涉及 div#movie_player 和 ytp-impression-link 等元素，但由于它们是 YouTube 播放器的一部分，因此很难直接影响它们。

问题： 如何删除或减少移动设备上视频下方不需要的空间？

预先感谢您的帮助和见解！

Answer 1

好吧，我运气不错，发现了问题。这些块中的不透明度：0或1需要更改为显示：无或块：

#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6 {
  animation: 1200ms fadeIn ease;
  animation-fill-mode: both;
  display: flex;
  width: 50%;
}

.video-gallery .video {
  animation: 1200ms fadeOut ease;
  animation-fill-mode: both;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 7;
  max-height: 19.5em;
  display: none;
  transition: all 300ms ease;
}

那么我的问题就变成了：这已经在 CodePen 中了。然而，它的样式为“CSS (Sass)”，并且固定行在给出的代码开头有//：

.video-gallery
    margin-top: 3em
    position: relative
    width: 100%
    .video
        animation: 1200ms fadeOut ease
        animation-fill-mode: both
        //display: none
        grid-column-start: 1
        grid-row-start: 1
        grid-row-end: 7
        //height: 0
        max-height: 19.5em
        opacity: 0

这是什么意思？我是否在导出到 CSS 时犯了错误，这是作者的一个选项，我忽略了理解吗？