title: Ziggeo : How to hide controls panel on the ziggeo recorder V2
body: <p>I've been using ziggeo for a week now and have found it to be perfect for my live stream recording application. The javascript api works perfectly. I was able to create a recorder which starts and stops recording by using the callable methods embedding.record() and embedding.stop() based on time elapsed. So far it works perfectly. However I am not able to find any embedding parameter which hides the control panel(with settings and record buttons and more) displayed on the V2 recorder. Here is my code</p>
  
  <pre><code>{% extends 'TraceBundle::layout.html.twig' %}
  
  {% block stylesheets %} 
      {{ parent() }}
      &lt;link href="{{ asset('bundles/trace/css/loader.css') }}" type="text/css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-stable/ziggeo.css" /&gt;
        &lt;style&gt;
        .navbar-default .navbar-nav &gt; li &gt; a {
      color:#337ab7;
  }
  &lt;/style&gt;
  {% endblock %}
  
  {% block content %}
      &lt;nav id="topnav" class="navbar navbar-default" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a href="#"&gt;&lt;img id="brand-logo" src="{{ asset('bundles/trace/img/logo-epita.png') }}" width="50" height="50" alt="easyRECrue" title="easyRECrue" /&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id="navbar-links-collapse" class="collapse navbar-collapse text-center"&gt;
                  &lt;ul class="nav navbar-nav navbar-center"&gt;
                      &lt;li&gt;
                          &lt;a&gt;Step 2/4: Practice&lt;/a&gt;
                      &lt;/li&gt;  
                  &lt;/ul&gt;
  
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;
                          &lt;a&gt;{{campaign.campaigntitle}}&lt;/a&gt;
                      &lt;/li&gt;    
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
      &lt;div id="practice-question" data-applicant-id="{{applicant.id}}" data-random-string="{{randomstring}}"&gt;    
          &lt;div class="row text-center"&gt;
              &lt;h3&gt;To Practice, tell us if this is your first video interview and what you think about it.&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="row text-center"&gt;
              &lt;div class="video-div"&gt;    
                  &lt;video id="myVideo" width="640" height="480" controls&gt;
                      &lt;source src="{{asset('bundles/trace/vid/mov_bbb.mp4')}}" type="video/mp4"&gt;
                  &lt;/video&gt;  
              &lt;/div&gt;
              &lt;p id="info"&gt;&lt;b&gt;!&lt;/b&gt;This answer will not be sent to the recruiter&lt;/p&gt;    
              &lt;p id="save-warning" class="hidden" style="color:red"&gt;Your recording is getting saved, Please do not hit back or refresh..&lt;/p&gt;
  
              &lt;div class="row text-center" id="hdfvr-content"&gt;&lt;/div&gt;
  
              &lt;div id="thinktime" style="margin-top:-310px;"&gt; &lt;/div&gt;    
              &lt;br&gt;     
              &lt;br&gt;     
              &lt;br&gt;     
              &lt;br&gt;     
              &lt;br&gt;     
              &lt;br&gt;     
              &lt;button class="btn btn-primary answer-now" type="button" value="answernow" data-timeleft=""&gt;Answer now&lt;/button&gt;
              &lt;div id="input-widget"&gt;
  {#                &lt;br&gt;#}
                  &lt;form method="post" id="response" action="{{ path('practicequestionpage',{'uniquecode': uniquecode}) }}"&gt;
                  &lt;progress value="0" max="30" id="progressBar"&gt;&lt;/progress&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;button class="btn btn-primary finished-answering hidden" type="button" value="finished"&gt;I've finished answering&lt;/button&gt;
                  &lt;button class="btn btn-primary submit hidden" type="submit" name="submit" value="submit" onClick="removePipeRecorder();"&gt;Question answered, continue the process&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  {% endblock %}      
  
  {% block javascripts %}
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="//assets-cdn.ziggeo.com/v1-stable/ziggeo.js"&gt;&lt;/script&gt;
      &lt;script&gt;ZiggeoApi.token = "r1a6fc911cd4e27b99d4c992e1e1d3b3";&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function () {
              ZiggeoApi.Events.on("system_ready", function() {
              var embedding = new ZiggeoApi.V2.Recorder({
              element: document.getElementById("hdfvr-content"),
              attrs: {
                  width: 320,
                  height: 240,
                  theme: "modern",
                  themecolor: "red",
                  skipinitial: "true",
                  limit: 30,
                  countdown: 0,
                  localplayback: "false",
                  //max take
                  recordings: 1,
                  picksnapshots: "false"
              }
          });
  
              $('#input-widget').hide();
              $('#hdfvr-content').hide();
              $('#info').hide();
  
              var timeLeft = 30;
              var elem = document.getElementById('thinktime');
              var lefttime = 30;
              var maxduration = 30;
              var minduration = 10;
              // loader(circle) variables
              var time = 30;
              var initialOffset = '440';
              var i = 1;
              // remove video pause button
              var video = document.getElementById("myVideo");
              if(video){
              $('video').one('play', function () {
                 video.removeAttribute("controls");  
              }); 
  
              $('#thinktime').hide();
              $('.answer-now').hide(); 
  
              document.getElementById('myVideo').addEventListener('ended',myHandler,false);  
              }else{ 
              timerId = setInterval(countdown, 1000);
              $('.answer-now').show();    
              loader(time,initialOffset,i);
              }
  
              function myHandler() {
                  embedding.activate();
                  $("#myVideo").remove();   
                  $('#thinktime').show();
                  $('#hdfvr-content').show();
                  $('#info').show();
                  $('.answer-now').show();
                  timerId = setInterval(countdown, 1000);
                  loader(time,initialOffset,i);
              }
  
              // loader
              function loader(time,initialOffset,i){ 
              /* Need initial run as interval hasn't yet occured... */
              $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/timeLeft)));
  
              var interval = setInterval(function() {
                      $('h2').text(i);
                      if (i == time) {    
                        clearInterval(interval);
                        return;
                      }
                      $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
                      i++;  
                  }, 1000);
              elem.innerHTML = '&lt;div class="item html"&gt;&lt;h2&gt;0&lt;/h2&gt;&lt;svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"&gt;&lt;g&gt;\n\
                  &lt;circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"&gt;'
                  '&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;';
              }
  
              function countdown() {
                $('.answer-now').click(function(){
                   $(this).data('clicked', true);
                  });
                if (timeLeft == 0 || $('.answer-now').data('clicked')) {               
                  clearTimeout(timerId);
                  embedding.record();
                  $('#input-widget').show();
                  $('#thinktime').hide();
                  $('.answer-now').hide();
                  var downloadTimer = setInterval(function(){
                  document.getElementById("progressBar").value = lefttime;
                  lefttime--;
  
                  if(lefttime == (maxduration-minduration)){
                      $('.finished-answering').removeClass('hidden');
                      $('.finished-answering').click(function () {
                          clearInterval(downloadTimer);
                          embedding.stop();
                          $('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
                          $('.record-icon').remove();
                          $('#save-warning').removeClass('hidden');
                          $('.finished-answering').addClass('hidden');
                          $('#progressBar').hide();
                      });
                  }
                  if(lefttime == 0){
                    clearInterval(downloadTimer);
                      embedding.stop();
                      $('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
                      $('.record-icon').remove();
                      $('#save-warning').removeClass('hidden');
                    $('#progressBar').hide();
                    $('.finished-answering').addClass('hidden');
                    }
                },1000);
                } else {                                               
                //  elem.innerHTML = '&lt;h1&gt;'+timeLeft+'&lt;/h1&gt;';
                  timeLeft--;
                  $('.answer-now').data('timeleft', timeLeft);
  
                }
              } 
              //hide/show input widget ends here
  
              embedding.on("recording", function () {
                  $("#hdfvr-content").append('&lt;span style="color:red; margin:175px 0px 0px -25px; position:absolute;" class="record-icon glyphicon glyphicon-record"&gt;&lt;/span&gt;');
              });   
  
              embedding.on("uploaded", function () {
                  $('#save-warning').addClass('hidden');
                  $('.submit').removeClass('hidden');
              });
          });
      });
      &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>I understand that for HTML based recorder, there may be a way to hide the control panel using css, but what about the flash based? How do you hide it from flash based recorder? Awaiting response...</p>
  
  <p>Regards,
  Utkarsh</p>