Documentation

Benefits of embedding via HTML

  • No programming experience required
  • Intuitive use

Video Player

  1. <ziggeo ziggeo-video="_sample_video" ziggeo-width=320 ziggeo-height=180> </ziggeo>
  2.   

Embeds video player in 320 pixels (width) x 180 pixels (height) playing the video named "sample_video".

Video Recorder

  1. <ziggeo ziggeo-width=320 ziggeo-height=240> </ziggeo>
  2.   

Embeds video recorder in 320 pixels (width) x 240 pixels (height).

Video Player

  1. <ziggeoplayer ziggeo-video="_sample_video" ziggeo-width=320 ziggeo-height=180 ziggeo-theme="modern" ziggeo-themecolor="red"> </ziggeoplayer>
  2.   

Embeds video player in 320 pixels (width) x 180 pixels (height) playing the video named "sample_video".

Video Recorder

  1. <ziggeorecorder ziggeo-width=320 ziggeo-height=240 ziggeo-theme="modern" ziggeo-themecolor="red"> </ziggeorecorder>
  2.   

Embeds video recorder in 320 pixels (width) x 240 pixels (height).

Benefits of this embedding via JS

  • Ideal for dynamic pages
  • Highly flexible (ideal for on the fly embedding)
  • Recommended for pages loaded over AJAX
  • Works well when element holding embedding is not yet on page (e.g. to be created by JavaScript)

Video Player

  1. <div id="replace_me-v1_player"></div> <script>
        var embedding = ZiggeoApi.Embed.embed(
            "#replace_me-v1_player", {
                width: 320,
                height: 180,
                video: "_sample_video"
        });
    </script>
    
  2.   

Embeds video player in 320 pixels (width) x 180 pixels (height) playing the video named "sample_video".

Video Recorder

  1. <div id="replace_me-v1_recorder"></div> <script>
        var embedding = ZiggeoApi.Embed.embed(
            "#replace_me-v1_recorder", {
                width: 320,
                height: 240
        });
    </script>
    
  2.   

Embeds video recorder in 320 pixels (width) x 240 pixels (height).

Video Player

  1. <div id="replace_me-v2_player"></div> <script>
        ziggeoApp.on("ready", function() {
            var player = new ZiggeoApi.V2.Player({
                element: document.getElementById("replace_me-v2_player"),
                attrs: {
                    width: 320,
                    height: 180,
                    theme: "modern",
                    themecolor: "red",
                    video: "_sample_video"
                }
            });
    
            player.activate();
        });
    </script>
    
  2.   

Embeds video player in 320 pixels (width) x 180 pixels (height) playing the video named "sample_video".

Video Recorder

  1. <div id="replace_me-v2_recorder"></div> <script>
        ziggeoApp.on("ready", function() {
            var recorder = new ZiggeoApi.V2.Recorder({
                element: document.getElementById("replace_me-v2_recorder"),
                attrs: {
                    width: 320,
                    height: 240,
                    theme: "modern",
                    themecolor: "red"
                }
            });
    
            recorder.activate();
        });
    </script>
    
  2.   

Embeds video recorder in 320 pixels (width) x 240 pixels (height).

Benefits of Pop-Ups

  • Pop-ups focus attention on video recorder and/or player
  • Website layout remains unchanged
  • Popping out from the website means that you can focus everyone to the video or recorder when you want and where you want.
  • Requires no specific placement into the website, so it is easy to have it there regardless of what changes you make to your website theme.

Video Player

  1. <ziggeo
      ziggeo-popup
      ziggeo-video="_sample_video">
    </ziggeo> 
    
  2.   

Embeds video player in 320 pixels (width) x 180 pixels (height) playing the video named "sample_video".

Popup Video Player

  1. <ziggeoplayer
      ziggeo-popup
      ziggeo-video="_sample_video"
      ziggeo-theme="modern"
      ziggeo-themecolor="red">
    </ziggeoplayer>
    
  2.   

Embeds video player in 640 pixels (width) x 320 pixels (height) playing the video named "sample_video".

Popup Video Recorder

  1. <ziggeorecorder
      ziggeo-popup
      ziggeo-theme="modern"
      ziggeo-themecolor="red">
    </ziggeorecorder>
    
  2.   

Embeds video recorder in 640 pixels (width) x 320 pixels (height) ready to record.

Benefits of Pop-Ups

  • Pop-ups focus attention on video recorder and/or player
  • Website layout remains unchanged
  • Ideal for on the fly embedding
  • Popping out from the website means that you can focus everyone to the video or recorder when you want and where you want.
  • Requires no specific placement into the website, so it is easy to have it there regardless of what changes you make to your website theme.

Video Player

  1. <div id="replace_me-v1_popup"></div> <script>
        var div = document.getElementById("replace_me-v1_popup");
        div.innerText = "Click on me to play me";
        div.onclick = function () {
            var embedding = ZiggeoApi.Embed.popup( {
                popup_width:640,
                popup_height:320,
                video: "_sample_video"
            });
        };
    </script>
    
  2.   

Embeds video player in 320 pixels (width) x 180 pixels (height) playing the video named "sample_video".

Popup Video Player

  1. <div id="replace_me-v2_popup"></div> <script>
        var div = document.getElementById("replace_me-v2_popup");
        div.innerText = "Click on me to play me";
        div.onclick = function () {
            var pop_player = new ZiggeoApi.V2.PopupPlayer({
                attrs: {
                    width: 640,
                    height: 320,
                    video: "_sample_video",
                    theme: "modern",
                    themecolor: "red"
                }
            });
            pop_player.activate();
        };
    </script>
    
  2.   

Embeds video player in 640 pixels (width) x 320 pixels (height) playing the video named "sample_video".

Popup Video Recorder

  1. <div id="replace_me-v2_popup_rec"></div> <script>
        var div = document.getElementById("replace_me-v2_popup_rec");
        div.innerText = "Click on me to record";
        div.onclick = function () {
            var pop_recorder = new ZiggeoApi.V2.PopupRecorder({
                attrs: {
                    width: 640,
                    height: 320,
                    theme: "modern",
                    themecolor: "red"
                }
            });
            pop_recorder.activate();
        };
    </script>
    
  2.   

Embeds video recorder in 640 pixels (width) x 320 pixels (height) ready to record.

Benefits of iframes

  • Some situations require you to use iframes, such as having your pages hosted on someone's else website, or to add code to your CMS.
  • Iframes allow specific permissions to be set for code within it, allowing you to sandbox your iframe the way you want to.
  • Iframes also allow you to contain the code within your pages, without them being actually part of your pages.

There are many changes done in how iframes are created and handled in the browser world. If you add your code directly, it will require you to constantly keep an eye on it. However using this embedding, it will addapt on its own. Our embedding will create an iframe and itself within that iframe, allowing you to have it all work as expected, without you updating its attributes.

Iframe Video Player

  1. <ziggeoiframeplayer
      ziggeo-video="_sample_video"
      ziggeo-responsive
      ziggeo-theme="modern"
      ziggeo-themecolor="red">
    </ziggeoiframeplayer>
    
  2.   

Creates iframe with the player playing the video named "sample_video".

Iframe Video Recorder

  1. <ziggeoiframerecorder
      ziggeo-responsive
      ziggeo-theme="modern"
      ziggeo-themecolor="red">
    </ziggeoiframerecorder>
    
  2.   

Creates iframe with the recorder embedding wihtin it

Benefits of iframes

  • Some situations require you to use iframes, such as having your pages hosted on someone's else website, or to add code to your CMS.
  • Iframes allow specific permissions to be set for code within it, allowing you to sandbox your iframe the way you want to.
  • Iframes also allow you to contain the code within your pages, without them being actually part of your pages.
  • With JS you can add these into any element that you create dynamically, through AJAX or for any other reason JS is best option for you.

There are many changes done in how iframes are created and handled in the browser world. If you add your code directly, it will require you to constantly keep an eye on it. However using this embedding, it will addapt on its own. Our embedding will create an iframe and itself within that iframe, allowing you to have it all work as expected, without you updating its attributes.

Iframe Video Player

  1. <div id="replace_me-v2_iframe"></div> <script>
        ziggeoApp.on("ready", function() {
            var iframe_player = new ZiggeoApi.V2.IframePlayer({
                element: document.getElementById("replace_me-v2_iframe"),
                attrs: {
                    width: 320,
                    height: 180,
                    theme: "modern",
                    themecolor: "red",
                    video: "_sample_video"
                }
            });
    
            iframe_player.activate();
        });
    </script>
    
  2.   

Creates iframe with the player playing the video named "sample_video".

Iframe Video Recorder

  1. <div id="replace_me-v2_iframe_rec"></div> <script>
      ziggeoApp.on("ready", function() {
          var iframe_recorder = new ZiggeoApi.V2.IframeRecorder({
              element: document.getElementById("replace_me-v2_iframe_rec"),
              attrs: {
                  width: 320,
                  height: 240,
                  theme: "modern",
                  themecolor: "red"
              }
          });
    
          iframe_recorder.activate();
      });
    </script>
    
  2.   

Creates iframe with the recorder embedding wihtin it