title: how to show a div when vimeo video reaches certain second?
body: <p>I am using <strong>Froogaloop.js</strong> to <strong>pause and play</strong> the <strong>vimeo video externally</strong> . Now I want to show a div after <strong>20 second</strong> of video has been played. How to achieve this, I searched a lot and was not able to crack the code for it. This is what I have tried so far..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var iframe = document.getElementById('video');
  
  // $f == Froogaloop
  var player = $f(iframe);
  
  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.api("play");
  });
  
  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.api("pause");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
    width: 48px;
    height: 48px;
    cursor: pointer;
  }
  
  .defs {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  iframe {
    float: left;
    width: 350px;
    height: 200px;
  }
  
  .buttons {
    padding: 1rem;
    background: #f06d06;
    float: left;
  }
  
  body {
    padding: 1rem;
  }
  
  .show--div-20sec {
    width: 100%;
    background: red;
    height: 80px;
    float: left;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"&gt;&lt;/script&gt;
  &lt;iframe src="https://player.vimeo.com/video/80312270?api=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"&gt;&lt;/iframe&gt;
  &lt;!-----------Show this div when video has been played for 20 seconds-----&gt;
  &lt;div class="show--div-20sec"&gt;
    Show me after 20 second of video play
  &lt;/div&gt;
  
  
  &lt;div class="buttons"&gt;
  
  
    &lt;button id="play-button"&gt;Play&lt;/button&gt;
    &lt;button id="pause-button"&gt;Pause&lt;/button&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Help much appriciated.. Thanks in advance :)</p>