根据容器按比例调整视频大小答案

【问题标题】：resize video proportionally to its container根据容器按比例调整视频大小
【发布时间】：2017-11-08 15:56:11
【问题描述】：

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

plyr.setup();

body {
	margin: 0;
}

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

#wrapper{
  display: flex;
  justify-content:center;
  width: 900px;
  height: 500px;
  background-color: green;
}

<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
  <div>
    <div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div> 
    </div>
</div>

【问题讨论】：

请不要链接到您在 3rd 方网站上的代码，因为这些链接会随着时间的推移而失效，然后您的问题在这里将毫无意义。
一般来说，如果您只想固定一个方向而另一个调整保持比例，您只需设置一个固定的方向而不指定另一个方向。
你有一个固定的高度为 500px，也将它应用到 iframe。这是您的脚本生成的代码：<div id="wrapper"> <div> <div tabindex="0" class="plyr plyr--youtube plyr--video"><div class="plyr__video-wrapper plyr__video-embed"><iframe ...... width="640" height="360" frameborder="0"></iframe></div></div> </div> </div>
@ScottMarcus 谢谢我知道，但不幸的是不能使用 plyr。
最好将一个带有padding-bottom的父div设置为视频比例的百分比。如果 youtube 是 16:9，填充百分比是 `56.25%`，高度为 0。然后使用高度100%、宽度100%、顶部0 和左侧0 设置iframe 位置absolute。这将按比例将视频从桌面缩放到移动。

标签： javascript html css plyr.js

【解决方案1】：

在#wrapper下，如果你去掉

display: flex;

那么你的高度/宽度百分比将真正起作用。然后你可以在你的 JS 中改变你想要的宽度。

【讨论】：

是的，斯科特，我做到了。他有一个指向 CodePen 的链接，如果你在他发布的地方尝试一下，它就可以工作 - codepen.io/gibbok/pen/ZaBopR

【解决方案2】：

你可以试试这个解决方案：为玩家生成的 html 添加其他类。

plyr.setup();

body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 900px;
height: 500px;
background-color: green;
}
.plyr__video-wrapper {
height: 100%;
}
.plyr__video-wrapper iframe {
width: 100%;
height: 100%;
}

<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
    <div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div> 
</div>

那么你的高度/宽度百分比实际上会完美地工作。

【讨论】：

【解决方案3】：

试试这个。 Fiddle

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;
}

【讨论】：