响应式视频嵌入到弹性父级中

Posted 2023-03-06

【中文标题】响应式视频嵌入到弹性父级中

【英文标题】：Responsive video embeds within a flex parent

【发布时间】：2021-10-25 00:41:43

【问题描述】：

我喜欢使用这个 CSS 来让我的 YouTube 嵌入响应保持其纵横比：

.video 
    position: relative;
    height: 0;
    margin: auto;
    overflow: hidden;
    padding-bottom: 56.25%;


.video iframe 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

但我还想在使用 display: flex; 的水平列表中列出它们所以无论列表中有多少个视频，列表都会保持在一行而不换行。

这可能吗？执行此操作时，我的视频项目出现高度拉伸问题，解决此问题的最佳方法是什么？

【参考方案1】：

虽然我在问题标题中声明了 flex parent，但我能够通过 display: grid; 实现我所寻找的内容；

由于我在下面声明的 minmax 300px，它确实会以一定的大小将换行成两行，但可以删除。

.productVideosList 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 16px;


.productVideosList__item 
    position: relative;
    width: 100%;
    padding-bottom: 56.2%;
    height: 0;


.productVideosList__item iframe 
    position: absolute;
    width: 100%;
    height: 100%;