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

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

尝尝这个。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;
}