我目前正在使用vimeo的播放器api显示全屏视频的网站。问题是,根据浏览器窗口的尺寸,我得到黑条,显然是因为窗口和视频比率之间的差异。
我已经尝试了很多css和js组合,包括但不限于通常的响应视频,fitvids的解决方案,但都无济于事。
我的问题是,那么:是一个全屏响应视频,可以使用vimeo的嵌入式播放器,还是最好放弃它并自己构建一个自定义播放器,仅使用vimeo来托管视频文件?
如果有帮助,这是相关代码:
HTML
<div id="video”>
<div id="video-container">
<iframe id="main-video" src="//player.vimeo.com/video/123456789?portrait=0&title=0&badge=0&byline=0&autoplay=1&color=333&api=1&player_id=main-video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
CSS
#video {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#video-container {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#main-video {
position: fixed;
min-width: 100%;
min-height: 100%;
}
提前感谢!
答案 0 :(得分:0)
我不认为有一种方法可以单独使用css(object-fit可能会在其他浏览器中实现时)。我甚至不确定无论如何都会使用我们的iframe。
我认为无论你选择哪个选项,你都必须知道视频的宽高比,并明确地将大小设置为大于窗口,并将定位设置为居中。