javascript - 根据容器按比例调整视频大小

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>

Answer 1

在#wrapper下，如果您删除

display: flex;

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

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

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

Answer 3

尝试这个。小提琴

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