按比例调整视频大小以适应其容器

Question

我需要根据容器设置视频的宽度/高度。 基本上，视频应该具有其绿色容器高度的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>

- GibboK

---

请不要在第三方网站上链接您的代码，因为这些链接随着时间的推移可能会失效，那么您的问题在这里将毫无意义。 - Scott Marcus

通常情况下，如果您只想固定一个方向并使另一个方向保持比例调整，您只需设置固定的那个方向，不需要指定其他任何内容。 - Scott Marcus

你的高度固定为500像素，也将其应用于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>` - G-Cyrillus

@ScottMarcus 谢谢，我知道这个，但不幸的是，使用 plyr 无法工作。 - GibboK

最好创建一个带有底部填充百分比的父级 div，以视频比例为基准。 如果是 YouTube 视频，比例为 16:9，填充百分比为 56.25%，高度为 0。然后将 iframe 位置设置为 absolute，高度为 100％，宽度为 100％，顶部为 0，左侧为 0。这将使得视频从桌面到移动设备等比例缩放。 - Aakash Thapa

Answer 1

你可以尝试这个解决方案： 为播放器生成的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>

那么您的高度/宽度百分比实际上将完美地起作用。

- HichamEch

Answer 2

在 #wrapper 下，如果你移除

。

display: flex;

然后你的高度/宽度百分比就会真正起作用。然后你可以在JS中将宽度更改为任何你想要的大小。

- Jared Bledsoe

---

是的，Scott，我试过了。他在链接中提供了CodePen，如果您在他发布的地方尝试它，它就可以工作-https://codepen.io/gibbok/pen/ZaBopR/。 - Jared Bledsoe

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

- Aakash Thapa