title: Best way to have a cover sized responsive video background on a website
body: <p>I have tried to have to go with the <code>mp4</code> approach with HTML5 <code>&lt;video&gt;</code> tags. Seems to work great, fully responsive, and takes the whole available space, without showing any weird black padding as YouTube player does. Except that I cannot make it always centered (cover size background). And I cannot find a way to upload a video and get a direct <code>mp4</code> link. I tried uploading to Dropbox and Streamable. Both come with their own annoying landing page which does not work with <code>&lt;video&gt;</code>.</p>
  <p>I gave up on that <code>&lt;video&gt;</code> idea and decided to go with a Youtube player. Which does not work at all. Here is what I have,</p>
  <pre class="lang-html prettyprint-override"><code>&lt;section class=&quot;hero&quot;&gt;
      &lt;iframe frameborder=&quot;0&quot; height=&quot;100%&quot; width=&quot;100%&quot; class=&quot;hero-video&quot; allowfullscreen allow=&quot;autoplay; encrypted-media;&quot;
          src=&quot;https://www.youtube-nocookie.com/embed/1CL_X5O71gk?vq=hd1080&amp;autoplay=1&amp;loop=1&amp;modestbranding=1&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;fs=0&amp;controls=0&amp;disablekb=1&amp;controls=0&amp;mute=1&amp;showinfo=0&amp;rel=0&amp;html5=1&quot;&gt;
      &lt;/iframe&gt;
      &lt;img class=&quot;logo&quot; src=&quot;./assets/logo.png&quot; alt=&quot;logo&quot; title=&quot;logo&quot; /&gt;
  &lt;/section&gt;
  </code></pre>
  <p>and the CSS used,</p>
  <pre class="lang-css prettyprint-override"><code>.hero-video {
      position: absolute;
      left: 0;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      z-index: -1;
  }
  
  .hero {
      position: relative;
      text-align: center;
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(rgba(94,88,88,0.5), rgba(94,88,88,0.5));
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
  }
  </code></pre>
  <p>To play around with the ideas,</p>
  <p><a href="https://jsfiddle.net/temurih/xpkoe08j/7/" rel="nofollow noreferrer">https://jsfiddle.net/temurih/xpkoe08j/7/</a></p>
  <hr />
  <p><strong>Second Approach:</strong></p>
  <p>In <code>&lt;video&gt;</code> tag approach, I was not able to center (cover size) the video. It looks weird on cellular devices.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;section class=&quot;hero&quot;&gt;
      &lt;video autoplay muted loop class=&quot;hero-video&quot;&gt;
          &lt;source src=&quot;https://player.vimeo.com/external/490883126.hd.mp4?s=ce7a3266505de5d5f8f51cd9c134e21d7b1d21bf&amp;profile_id=175&quot; type=&quot;video/mp4&quot;&gt;
          Your browser does not support HTML5 video.
      &lt;/video&gt;
      &lt;img class=&quot;logo&quot; src=&quot;./assets/logo.png&quot; alt=&quot;logo&quot; title=&quot;logo&quot; /&gt;
  &lt;/section&gt;
  </code></pre>
  <p>CSS is more or less the same,</p>
  <pre class="lang-css prettyprint-override"><code>.hero-video {
      position: absolute;
      left: 0;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      z-index: -1;
  }
  
  .hero {
      position: relative;
      text-align: center;
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(rgba(94,88,88,0.5), rgba(94,88,88,0.5));
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      overflow: hidden;
  }
  </code></pre>
  <p>To play around with the ideas,</p>
  <p><a href="https://jsfiddle.net/temurih/xpkoe08j/12/" rel="nofollow noreferrer">https://jsfiddle.net/temurih/xpkoe08j/12/</a></p>