响应式HTML5视频,宽高比可以改变

时间:2013-08-11 07:57:17

标签: javascript html css

我正在尝试使用DesignModo的video.js和Flat UI设置HTML5视频播放器。我有一个问题,我需要使视频播放器响应,所以宽度需要100%。

问题在于,当设置此项时,视频的高度始终与您可以看到的in this fiddle相同。所以我需要(我认为)是一个脚本,它会在宽高比改变时检测宽高比。我找到了类似over here的脚本,但它是专为YouTube或Vimeo等iframe视频设计的。

我尝试通过将$allVideos的值更改为$("video[class^='video-js']"),来修改脚本,但似乎没有效果。任何人都可以查看my Fiddle并试着告诉我有什么问题以及如何解决它?


顺便说一下,我知道字体文件和图像的链接正在转向404,那是因为目前文件没有托管在我的服务器上,我刚刚在本地测试它们。

1 个答案:

答案 0 :(得分:0)

只需从height: 100%;移除.video-js .vjs-tech即可。这样就可以从给定的宽度100%自动获取宽高比。