全屏响应式视频播放器

时间:2013-12-14 19:03:57

标签: html css video fullscreen vimeo-player

我目前正在使用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%;
}

提前感谢!

1 个答案:

答案 0 :(得分:0)

我不认为有一种方法可以单独使用css(object-fit可能会在其他浏览器中实现时)。我甚至不确定无论如何都会使用我们的iframe。

我认为无论你选择哪个选项,你都必须知道视频的宽高比,并明确地将大小设置为大于窗口,并将定位设置为居中。