0

我目前正在一个使用 vimeo 的播放器 api 显示全屏视频的网站上工作。问题是，根据浏览器窗口尺寸，我得到黑条，显然是因为窗口和视频比率之间的差异。

我已经尝试了很多 css 和 js 组合，包括但不限于通常的响应式视频解决方案，fitvids，但都无济于事。

那么，我的问题是：是否可以使用 vimeo 的嵌入式播放器制作全屏响应式视频，还是最好放弃它并自己构建一个自定义播放器，仅使用 vimeo 来托管视频文件？

如果有帮助，这里是相关代码：

HTML

<div id="video”&gt;
    <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%;
}

提前致谢！

4

1 回答 1

0

我认为目前还没有一种方法可以单独使用 css 来做到这一点（object-fit在其他浏览器中实现时可能会起作用）。我什至不确定这是否适用于我们的 iframe。

我认为无论您使用哪个选项，您都必须知道视频的纵横比并明确将尺寸设置为大于窗口，并将定位设置为居中。

于 2014-03-18T17:42:58.130 回答