title: Full width Youtube embed hero background video
body: <p>I'm looking for a HTML &amp; CSS way to display this embed video as a 75vh height hero background.</p>
  
  <p>For now, the iFrame keep his <code>width: 100%</code> and his <code>height: 75vh</code> but the images in itselves aren't covering the whole header width.</p>
  
  <p><strong>Actually, I need it to behave like a</strong> <code>background-size: cover</code> <strong>property</strong>.</p>
  
  <p>Here is a quick attached jsfiddle to illustrate this issue, best way to see it is in a new tab.  </p>
  
  <blockquote>
    <p><a href="https://jsfiddle.net/wollsale/9yrvLy72/" rel="nofollow noreferrer">https://jsfiddle.net/wollsale/9yrvLy72/</a></p>
  </blockquote>
  
  <p>PS : I know there is a loads of articles talking about that kind of problem, but I didn't found a solution that works for me.</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-css lang-css prettyprint-override"><code>body {
    background: #aaa;
    margin: 0;
    padding: 0;
    height: 2000px;
  }
  
  body {
    background: #aaa;
    margin: 0;
    padding: 0;
    height: 2000px;
  }
  
  header {
    background: #ddd;
    height: 75vh;
    width: 100%;
  }
  
  .video__wrapper {
    position: relative; padding-bottom: 53.25%; /* 16:9 */  padding-top: 25px;
  }
  
  .video__inner {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     min-height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&amp;loop=0&amp;rel=0&amp;showinfo=0&amp;controls=0&amp;autohide=1" frameborder="0" class="video__inner"&gt;&lt;/iframe&gt;
    &lt;/header&gt;
    
    &lt;main&gt;&lt;/main&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>This article explain how to use HTML &amp; CSS only to kind of "crop" a video in order to make it covering to whole viewport.</p>
  
  <blockquote>
    <p><a href="https://fvsch.com/code/video-background/" rel="nofollow noreferrer">https://fvsch.com/code/video-background/</a></p>
  </blockquote>
  
  <p>See it in action with this great codepen </p>
  
  <blockquote>
    <p><a href="https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&amp;limit=all&amp;type=type-pens" rel="nofollow noreferrer">https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&amp;limit=all&amp;type=type-pens</a></p>
  </blockquote>