Javascript 要显示的Youtube播放器选项

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

工作小提琴-

.container{
宽度：400px；
边框：1px实心#CECECE；
保证金：自动；
高度：400px；
位置：相对位置；
}
.直肠{
边框：1px纯红；
宽度：100px；
高度：100px；
保证金：自动；
左：150px；
顶部：150px；
位置：绝对位置；
过渡：变换2s，边框宽度2s；
变换原点：中心；
}
.rect:悬停{
变换：尺度（3）；
边框宽度：1px；
}
.rect iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：96%；
身高：96%；
}

CSS变换仅缩放元素，要更改实际大小，必须如下设置其

宽度

和

高度

。我还更新定位值并添加“平移”以使其居中对齐

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

.container{
宽度：400px；
边框：1px实心#CECECE；
保证金：自动；
高度：400px；
位置：相对位置；
}
.直肠{
边框：1px纯红；
宽度：100px；
高度：100px；
保证金：自动；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
过渡：宽度2s、高度2s、变换2s、边框宽度2s；
变换原点：中心；
}
.rect:悬停{
宽度：300px；
高度：300px；
边框宽度：1px；
}
.rect iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：96%；
身高：96%；
}