底部填充的 iframe (youtube) 问题

Question

我必须在一定范围内添加来自 Youtube 的视频（屏幕截图上的红色边框）。要在这些限制内添加视频，我需要使用 padding-bottom: 36%。因此，您不能按底部块（带有日期）。

如果我减少这个 padding-bottom，带有日期的块会移动到正确的位置，但高度也会减少。 这是css的部分：

.calendar__general-slyde-video {
position: relative;
padding-bottom: 36%;
height: 0;
overflow: hidden;
width: 315px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
}

如果有任何帮助，我将不胜感激！

Answer 1

好的，如果您提供的链接是您的代码，而您的问题是将日历放在最左边的消息下方，即"calendar__changing-content" div，那么这是我发现的一些问题

首先，您的calendar__general-slyde-video clearfix 有height:0，这意味着您的视频被放置在 div 的内边距上。（代表它的整个高度）

其次，您的 "calendar__changing-content" div 不包含在单行中的子项（假设这是您根据给定图片的意图）因此您的日历位于正确的位置，但它的兄弟 div 的高度很大，这使得它看起来失真.

这里是他们的解决方案： 为视频添加高度并移除填充也使 iframe 100% 高度，如果您愿意，您也可以从其他孩子的高度移除。

.calendar__general-slyde-video {
 position: relative;
overflow: hidden;
width: 315px;
height: 233px;
}

.calendar__general-slyde-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

这里是code pen

这应该可以解决您的问题，您也可以使用reset.css 删除浏览器默认设置（只是建议）