Ziggeo 视频 - 如何做出响应？

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 基于 flash 和 JWPlayer，而 v2 是 Ziggeo 自下而上编写的，在移动响应方面要好得多。

相同的代码如下所示：

<ziggeoplayer
    ziggeo-video="_sample_video"
    ziggeo-responsive>
</ziggeoplayer>

或者，使用 v2，您还可以做一些很酷的事情，例如：

<ziggeoplayer
    ziggeo-video="_sample_video"
    style="width:100%; height:100%">
</ziggeoplayer>

• 代码将忽略您添加的附加参数，因此样式属性将保留在那里。

Recorder 看起来很相似，使用 <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 可以帮助您在不设置属性的情况下执行此操作，但上面的代码应该可以帮助您入门。