要显示的 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 变换只缩放元素,要改变实际大小,你必须设置它的 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 {
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>
我正在为 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 变换只缩放元素,要改变实际大小,你必须设置它的 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 {
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>