Documentation

Overview SDKs API Reference Dashboard Integrations How To's
SDKs > JavaScript SDK > Browser Integration > Embedding Methods

Embedding Methods

There are several ways to embed Ziggeo's Video Player, Video Recorder, and Video Uploader.

Embed via HTML Code

Benefits of embedding via HTML

  • No programming experience required
  • Intuitive use

HTML Examples

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).

Embed via JavaScript

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)

JavaScript Examples

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).

Embed as Pop-Up via HTML

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.

HTML Pop-Up Examples

Using the JavaScript SDK

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.

Embed as Pop-Up via JavaScript

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.

JavaScript Pop-Up Examples

Using Version 2 of the JavaScript SDK

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.

Embed in iframe via HTML

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 adapt 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.

HTML Iframe Examples

Using Version 2 of the JavaScript SDK

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 within it

Embed in iframe via JavaScript

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 adapt 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.

JavaScript Iframe Examples

Using the JavaScript SDK

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_m_v2_iframe_rec"),
          attrs: {
              width: 320,
              height: 240,
              theme: "modern",
              themecolor: "red"
          }
      });

      iframe_recorder.activate();
  });
</script>
  2.   

Creates iframe with the recorder embedding within it