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

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

记录器看起来很相似，带有<ziggeorecorder>被用来代替 <ziggeoplayer>并且它也支持响应式参数。

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

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

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