title: Vimeo video with a custom unmute button using a video tag
body: <p>Currently I'm autoplaying a video on page load from a Vimeo direct link with am html5 <code>&lt;video&gt;</code> tag, this loads the video really quick on the page and the poster attribute also helps for perceived loading time:</p>
  
  <pre><code>&lt;video id="video" poster="abc.jpeg?$staticlink$" playsinline muted&gt;
        &lt;source type="video/mp4" src="https://player.vimeo.com/external/408636.hd.mp4?s=1552e499fb1e3aa2bf881c2ae762aa23988b5d&amp;profile_id=175"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Now I want a way to unmute this using a button on the page, I've decided to do this i have to now use the Vimeo API <a href="https://github.com/vimeo/player.js" rel="nofollow noreferrer">player.js</a>. See code below. The problem I'm having now is the <code>iframe</code> loads slow, and the vimeo API doesnt seem to have a poster attribute.</p>
  
  <pre><code>  &lt;html&gt;
      &lt;div id="video" width="100%" height="100%"&gt;&lt;/div&gt;
      &lt;button class="volume"&gt;VOLUME ON&lt;/button&gt;
    &lt;/html&gt;
  
    &lt;script&gt;
      var volBtn = document.querySelector('.volume')
  
      var options = {
        url: "https://vimeo.com/123/456",
        loop: true,
        autoplay: true,
        background: true
      };
  
      var videoPlayer = new Vimeo.Player('video', options);
  
      volBtn.addEventListener('click', () =&gt; {
        videoPlayer.setVolume(1);
      })
    &lt;/script&gt;
  </code></pre>
  
  <p>Is there a better way to do this, so we have both the video tags speed, and the iframes ability to unmute? Am I missing something obvious with the video or iframe tags? Can I maybe use a video tag with the Vimeo API?</p>