如何解决100vh Vimeo 播放器 iframe
我正在嵌入 Vimeo 视频并遇到了一些样式问题。
这是我使用的播放器:https://developer.vimeo.com/player/sdk
对于每个视口尺寸,播放器都应该完全填满屏幕,因此 min-width: 100vh
和 min-height: 100vw
。
我设法使播放器适合宽度,使用
::v-deep iframe {
min-width: 100vw;
min-height: 100vw;
.player {
width: 100vw;
height: 100vh;
}
}
然而,它忽略了最小高度。有没有人知道如何解决这个问题?
编辑: 到目前为止,我的代码如下:
body {
background-color: yellow;
padding: 0;
margin: 0;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
iframe {
min-width: 100vw;
min-height: 100vw;
}
.player {
width: 100vw;
height: 100vh;
}
<div class="h-screen flex items-center justify-center overflow-hidden">
<iframe id="player1" src="https://player.vimeo.com/video/76979871" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。