Javascript 根据其容器按比例调整视频大小

我需要根据其容器设置视频宽度/高度。 基本上，视频的高度应该是其绿色容器的100%，宽度应该是可变的

plyr.setup（）
正文{
保证金：0；
}
普利尔先生{
身高：100%；
宽度：100%；
}
#包装纸{
显示器：flex；
证明内容：中心；
宽度：900px；
高度：500px；
背景颜色：绿色；
}

在#包装器下，如果移除

display: flex;

然后，您的高度/宽度百分比将实际起作用。然后，您可以在JS中将宽度更改为您想要的宽度。
您可以尝试以下解决方案：
为玩家生成的html添加其他类


plyr.setup（）
正文{
保证金：0；
}
普利尔先生{
身高：100%；
宽度：100%；
}
#包装纸{
显示器：flex；
证明内容：中心；
宽度：900px；
高度：500px；
背景颜色：绿色；
}
.plyr__视频包装器{
身高：100%；
}
.plyr__视频包装器iframe{
宽度：100%；
身高：100%；
}

试试这个

请不要在第三方网站上链接到您的代码，因为随着时间的推移，这些链接可能会失效，您的问题在这里将毫无意义。通常，如果您只希望一个方向固定，另一个方向调整以保持比例，您只需设置一个固定的，而不指定关于另一个的任何内容。您将固定高度设置为500px，并将其应用于iframe。以下是您的脚本生成的代码：
@ScottMarcus谢谢我知道它，但不幸的是，使用plyr无法工作。最好使用填充底部到视频比率百分比的父div。如果youtube为
16:9
，填充百分比为'56.25%'，高度
0
。然后将iframe位置设置为绝对位置，高度
100%
，宽度
100%
，顶部
0
，左侧
0
。这将按比例将视频从桌面扩展到手机。是的，斯科特，我做到了。他有一个代码笔的链接，如果你在他发布的地方尝试一下，它就会工作-
body {
  margin: 0;
}

.plyr {
height: 100%;
  width :100%;
}

#wrapper{
  display: flex;
  justify-content:center;
  width: 100%;
  background-color: green;
}

.plyr__video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
}

.plyr__video-wrapper iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}