底部有iframe（youtube）问题

Question

我必须在特定限制（屏幕截图中的红色边框）内添加来自YouTube的视频。要在这些限制内添加视频，我需要使用padding-bottom：36％。因此，您不能按底部的方框（带有日期）。

如果我减小此填充底部，则带日期的块会移到正确的位置，但高度也会减小。 这是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

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

首先，您的PHP具有"calendar__changing-content" div，这意味着您的视频被放置在div的填充上（代表整个高度）

第二秒，您的calendar__general-slyde-video clearfix不会在一行中包含子元素（假设这是基于给定图片的目的），因此您的日历位置正确，但同级div的高度很大，因此看起来变形了。

这是解决方案： 为视频添加一个高度并删除填充，也使iframe的高度为height:0，如果您愿意，也可以从其他儿童的高度中删除高度。

"calendar__changing-content" div

这是code pen

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