我一直在尝试这么多东西来让Ziggeo视频响应。但我所看到的只是固定宽度。我需要的是Ziggeo 100%宽度并在各种移动设备上正确查看。
这是示例代码:
<ziggeo
ziggeo-video="_sample_video"
ziggeo-width=320
ziggeo-height=240>
</ziggeo>
宽度和高度以像素为单位指定,我似乎无法设置百分比。
链接到示例:https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v1
有谁知道如何通过CSS,HTML或JavaScript使Ziggeo适合100%宽度?
谢谢
答案 0 :(得分:1)
看起来像是:
<ziggeo
ziggeo-video="_sample_video"
ziggeo-responsive>
</ziggeo>
我确实建议检查播放器和录像机的v2版本,而不是上面代码所针对的v1。区别在于v1基于闪存和JWPlayer,而v2是由Ziggeo自下而上编写的,并且在移动响应方面要好得多。
它的相同代码如下所示:
<ziggeoplayer
ziggeo-video="_sample_video"
ziggeo-responsive>
</ziggeoplayer>
或者,使用v2,你也可以做一些很酷的事情,如下所示:
<ziggeoplayer
ziggeo-video="_sample_video"
style="width:100%; height:100%">
</ziggeoplayer>
记录器看起来很相似,使用<ziggeorecorder>
代替<ziggeoplayer>
,它也支持响应参数。
我个人建议使用自适应选项并使用样式或类等为代码添加其他格式。
PS:您提到的页面(https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods)右上角有一个下拉列表,可以帮助您将v1切换到v2,反之亦然。
更新(发布后): - 值得一提的是,有一些浏览器特定的样式可以使一些元素有额外的填充和边距应用,以及你自己的CSS代码,所以如果你看到它周围的一些空白,最好检查一下是否有是否需要添加/更改任何CSS代码,或重置CSS。
答案 1 :(得分:0)
尝试一下:
$( window ).resize(function() {
var height = window.innerHeight;
var width = window.innerWidth;
$('#videoElementId').prop('ziggeo-width', width);
$('#videoElementId').prop('ziggeo-height', height);
});
我确信Ziggeo中有一个API可以在不设置属性的情况下帮助您完成此操作,但上面的代码可以帮助您入门。