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添加其他类。

＆＃13;

plyr.setup();

＆＃13;

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

＆＃13;

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

＆＃13;

然后你的身高/宽度百分比实际上是完美的。

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

按比例调整视频大小

3 个答案: