如何根据div的宽度设置div的高度，而该高度又由其所放置的网格动态设置？

Question

在上面的网格系统中，前8列被称为BIG框（红色，黄色，黑色，灰色灰色条），“ BIG box”的红色部分称为RED DIV，其中16： 9/4：3 VIDEO DIV将出现，但红色div始终仅应为16：9。它的宽度显然是由网格设置的。目前，我已将56.25％的padding-top设置为16：9，但如果存在padding，如何将其用于将保留在其中的video div？万一视频div（应该在red div内渲染）没有得到渲染，我仍然希望red div为空并且以16：9的方式显示。不影响任何其他元素。

IN SHORT ：当未加载视频div时，我仍然希望红色div在16：9出现，当视频div被淘汰时，我希望红色div仅可用于video div，padding等都可能使事情变得怪异。我不太确定填充会如何影响，因为我没有访问video div来加载它的全部内容，而且我是CSS和JS的新手。

我只发现这样做的填充方法，并且通过js进行填充似乎不是很有效的idk（例如从dom中获取宽度和设置高度，还涉及到反应，所以我认为这是一团糟）。请直接向我说明如何操作，谢谢。如果不清楚，请在评论中提及。 ：）