Ziggeo 视频 - 如何做出响应？

Question

我一直在尝试很多事情来使 Ziggeo 视频具有响应能力。但我所看到的只是固定宽度。我需要的是 Ziggeo 为 100% 宽度并在各种移动设备上正确查看。

这是示例代码：

<ziggeo
  ziggeo-video="_sample_video"
  ziggeo-width=320
  ziggeo-height=240>
</ziggeo>

宽度和高度以像素为单位指定，我似乎无法设置百分比。

Link 例如：https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v1

有人知道如何通过 CSS、HTML 或 JavaScript 使 Ziggeo 适合 100% 宽度吗？

谢谢

Answer 1

试一试：

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

我确定 Ziggeo 中会有一个 API 来帮助您在不设置属性的情况下执行此操作，但上面的代码应该可以帮助您入门。

Answer 2

其实有响应参数- 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>

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

记录器看起来很相似，使用 <ziggeorecorder> 而不是 <ziggeoplayer>，它也支持响应参数。

我个人确实建议使用响应选项并使用样式或 class 等来为您的代码添加额外的格式。

PS：您提到的页面（https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods）在右上角有一个下拉菜单，可以帮助您将 v1 切换为 v2，反之亦然。

更新（发布后）： - 值得一提的是，有一些特定于浏览器的样式可以使某些元素应用额外的填充和边距，以及您自己的 CSS 代码，所以如果您看到它周围有一些空白，最好查看是否有任何 CSS 代码需要 added/altered，或者 CSS 重置。

Ziggeo 视频 - 如何做出响应？

Ziggeo video - How to make responsive?

html

javascript

css

ziggeo-sdk