Question

我一直在尝试这么多东西来让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％宽度？

谢谢

Answer 1

实际上有响应参数 - https://ziggeo.com/docs/sdks/javascript/browser-integration/parameters#javascript-revision=v1-stable&javascript-version=v1

看起来像是：

<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。

Answer 2

尝试一下：

$( window ).resize(function() {
  var height = window.innerHeight;
  var width = window.innerWidth;
  $('#videoElementId').prop('ziggeo-width', width);
  $('#videoElementId').prop('ziggeo-height', height);
});

我确信Ziggeo中有一个API可以在不设置属性的情况下帮助您完成此操作，但上面的代码可以帮助您入门。

Ziggeo视频 - 如何做出响应？

2 个答案: