Search code examples
javascripthtmlcssziggeo-sdk

Ziggeo video - How to make responsive?

I have been trying so many things to make Ziggeo video responsive. But all I see is fixed width. What I need is Ziggeo to be 100% width and view correctly on various mobile devices.

This is example code:

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

Width and height is specified in pixels and I don't appear to be able to set percentage.

Link to example: https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v1

Does anyone know how to make Ziggeo fit 100% width via CSS, HTML or JavaScript please?

Thank you

Solution

  • Actually there is responsive parameter - https://ziggeo.com/docs/sdks/javascript/browser-integration/parameters#javascript-revision=v1-stable&javascript-version=v1

    It would look something like:

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

    I do suggest however checking out the v2 version of the player and recorder instead of v1 for which the code above is for. The difference is that v1 is based on flash and JWPlayer, while v2 is written from bottom up by Ziggeo and is far better at being mobile responsive.

    Same code for it would look like this:

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

    Alternatively, with v2 you could also do some cool things like the following:

    <ziggeoplayer
    ziggeo-video="_sample_video"
    style="width:100%; height:100%">
</ziggeoplayer>
    • The code will ignore the additional parameter that you add so the style attribute would stay there.

    Recorder would look similar, with <ziggeorecorder> being used instead of <ziggeoplayer> and it supports responsive parameter as well.

    I personally do suggest using the responsive option and to use the style or class, etc. to add additional formatting to your code.

    PS: The page you have mentioned (https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods) has a dropdown at the top right corner that can help you switch the v1 to v2 and the other way around.

    UPDATE (after posting): - it is good to mention that there are some browser specific styles that can make some elements have additional padding and margin applied, as well as your own CSS code, so if you see some whitespace around it, it is good to check out if there are any CSS codes that need to be added/altered, or the CSS reseted.