如何让描述元素固定在流式嵌入YouTube视频底部

无需修改现有HTML结构，只需调整CSS即可让描述span始终固定在iframe底部，同时保证视频比例不受文本长度影响，以下提供两种适配方案：

现代浏览器适配方案（简洁版） #

利用flex布局结合aspect-ratio属性实现视频比例控制，同时让span自然固定在底部：

.video-container {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 16/9; /* 实现16:9的视频宽高比 */
}
.video-container iframe {
    flex: 1;
    border: 0;
}
.video-container > span {
    background-color: #f0f2f5;
    padding: 4px;
    width: 100%;
    box-sizing: border-box; /* 避免padding撑宽元素 */
}

兼容旧浏览器方案 #

通过伪元素维持视频比例，结合flex布局的margin-top:auto让span固定到底部：

.video-container {
    position: relative;
    display: flex;
    flex-direction: column;
}
/* 伪元素实现16:9比例 */
.video-container::before {
    content: "";
    padding-bottom: 56.25%;
    order: -1; /* 将伪元素置于iframe之前 */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-container > span {
    background-color: #f0f2f5;
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* 强制span固定在容器底部 */
}

方案说明 #

• 现代方案代码简洁，依赖浏览器对aspect-ratio的支持，iframe会自动占满除span外的容器空间，span自然处于底部。
• 兼容方案通过伪元素替代原padding-bottom的比例控制逻辑，利用flex布局的特性让span固定，同时iframe绝对定位覆盖伪元素空间，不影响整体布局。

内容的提问来源于stack exchange，提问作者dragoweb