title: HTML 5 video CSS: Force responsive ratio 16:9 on video poster image (for preload="none" videos)
body: <p>Assuming that the poster size of an HTML 5 video should always be 16:9 but the height of the actual video is still auto. How can I make the poster image stick to those dimensions (it shall be cutted to fit the dimensions e.g. with object-fit)?</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>video {
    width:100%;
    height:auto;
  }
  
  video[poster] {
    width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video poster="https://i.imgur.com/LFgR8jD.png" controls="controls" class="pimcore_video" preload="none"&gt;
  &lt;source type="video/mp4" src="https://storage.coverr.co/videos/sksZ7cBoTBAJkB4Bul46QAI1c01x7lx18?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTg3MDMwNzIwfQ.moAIavql_5_ggd9hrKExX6iPeo2UM_CMya6Mozg4hyY"&gt;
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in the snippet above the size of the poster image is different to the video itself.</p>