title: play() failed because the user didn't interact with the document first - on click event using Vimeo API
body: <p>I'm assuming an onclick event counts as interacting with the document, so not sure why an autoplay error is being thrown</p>
  
  <blockquote>
    <p>Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.</p>
  </blockquote>
  
  <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>const playbtn = document.getElementById('playbtn');
  const player = document.getElementById('video-player');
  const vimeoPlayer = new Vimeo.Player(player);
  playbtn.onclick = function() {
    playbtn.style.display = "none";
    vimeoPlayer.play();
  }
  vimeoPlayer.on('pause', function() {
    playbtn.style.display = "block";
  });
  vimeoPlayer.on('play', function() {
    playbtn.style.display = "none";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>i {
    position: absolute;
    color: white;
  }
  .fa-play-circle {
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          font-size: 20rem;
          -webkit-transform:  translateX(-50%, -50%);
          -moz-transform:     translate(-50%, -50%);
          -ms-transform:      translate(-50%, -50%);
          -o-transform:       translate(-50%, -50%);
          transform:          translate(-50%, -50%);
          z-index: 2;
          color: white;
          color: rgba(255,255,255,0.75);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"&gt;
  &lt;script src="https://player.vimeo.com/api/player.js"&gt;&lt;/script&gt;
  
  &lt;div id="video-outer-full"&gt;
    &lt;div id="video-inner"&gt;
      &lt;i class="far fa-play-circle" id="playbtn"&gt;&lt;/i&gt;
      &lt;iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>