1

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

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Kitchen Bin
  • 89
  • 1
  • 9

2 Answers2

1

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.

Bane D
  • 441
  • 2
  • 4
  • Thank you Bane. I truly appreciate Ziggeo Support and how fast you replied. Thanks for adding the Ziggeo-Responsive flag in Version 1. It's not working quite as I hoped but I'll change my code to use Version 2 which looks like it'll handle responsive really well. I'll report back on here once I get into it but certainly Ziggeo-Responsive combined with Version 2 will solve my problem. Thanks again. – Kitchen Bin May 01 '17 at 19:17
  • 1
    I can confirm using V2 solved my responsive problem. Good work! "ziggeo-responsive" didn't work well on V1 but worked perfectly on V2. Using V2, this code works: ` ` – Kitchen Bin May 02 '17 at 19:55
  • v1 is actually not as mobile friendly as it is using JWPlayer and Flash, while v2 is built with mobile devices being priority so it behaves much better, plus future wise v2 would be the best way to go with as it has all the cool features :) – Bane D May 04 '17 at 15:39
  • Thanks. In the end I achieved what I wanted by using Ziggeo V2 combined with the new 'Responsive' flag. And used 2 x components: ZiggeoPlayer and ZiggeoRecorder, hiding each one when it wasn't required. All worked nicely. – Kitchen Bin May 07 '17 at 03:24
0

Give this a try:

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

I'm sure there would be an API within Ziggeo to help do this without setting the properties, but the code above should help you get started.

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
  • Thank you. When the control renders it actually removes the 'ziggeo' tags and replaces it with dozens of lines of HTML. I have tried the API but setting of the width to 100% doesn't work. I will contact Ziggeo technical support and publish the solution on here if they reply. – Kitchen Bin Apr 30 '17 at 19:54