表示するYoutubeプレーヤーのオプション

Question

私はyoutubeビデオ用のコンテナを作成していますが、これは2倍にスケールアップしますが、200pxの場合でも100に設定されているプレーヤーオプションが表示されているという問題があります。私のyoutubeプレーヤーは200pxのために利用可能なオプションでポップアップする。

ワーキングフィドル -

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

https://jsfiddle.net/uu1rz6vp/

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>