要显示的 Youtube 播放器选项

Youtube player options to display

我正在为 youtube 视频创建一个容器,悬停比例为 2 倍,但问题是即使在 200px 上它也会显示设置为 100 的播放器选项。让我知道如何制作我的 youtube 播放器弹出 200px 可用的选项。

工作 Fiddle - https://jsfiddle.net/uu1rz6vp/

.container {
  width: 400px;
  border: 1px solid #CECECE;
  margin: auto;
  height: 400px;
  position: relative;
}
.rect {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 150px;
  top: 150px;
  position: absolute;
  transition: transform 2s, border-width 2s;
  transform-origin: center;
}
.rect:hover {  
  transform: scale(3);
  border-width: 1px;
}
.rect iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  height: 96%;
}
<div class="container">
  <div class="rect">
    <iframe src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
  </div>
</div> 

<div class="static-container">
  <iframe width="100" height="100" src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="static-container">
  <iframe width="200" height="200" src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
</div>

https://jsfiddle.net/uu1rz6vp/1/

CSS 变换只缩放元素,要改变实际大小,你必须设置它的 widthheight 如下。我还更新定位值并添加翻译以使其居中对齐。

.rect {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rect:hover {       
  width: 300px;
  height: 300px;
}

.container {
  width: 400px;
  border: 1px solid #CECECE;
  margin: auto;
  height: 400px;
  position: relative;
}
.rect {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: width 2s, height 2s, transform 2s, border-width 2s;
  transform-origin: center;
}
.rect:hover {  
  width: 300px;
  height: 300px;
  border-width: 1px;
}
.rect iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  height: 96%;
}
<div class="container">
  <div class="rect">
    <iframe src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
  </div>
</div> 

<div class="static-container">
  <iframe width="100" height="100" src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="static-container">
  <iframe width="200" height="200" src="https://www.youtube.com/embed/qLUWTjL2IH0" frameborder="0" allowfullscreen></iframe>
</div>