Параметры проигрывателя Youtube для отображения

Question

Я создаю контейнер для видео youtube, который на шкале наведения до 2x, но проблема в том, что даже если на 200px он показывает параметры игрока, которые устанавливаются в 100. Сообщите мне, как я могу сделать my youtube player для всплывающих окон с параметрами, доступными для 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 { \t \t 
 
    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> \t 
 

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

Answer 1

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

CSS Превращает только масштабировать элемент, чтобы изменить фактический размер, вы должны установить его width и height, как показано ниже. Я также обновляю значения позиционирования и добавляю перевод, чтобы выровнять по центру.

.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 { \t \t 
 
    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> \t 
 

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