title: How to make video fit into div?
body: <p>I need a bit of help. I know this post has been done before but whatever I tried didn't work for me. So basically I have a div which is 300px by 250 and I want to fit my video into this without rendering the video to 300 by 250. Could you please help me out thanks! :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  #banner{
   position:fixed;
   margin:0;
   width:300px;
   height:250px;
   border: 1px solid red;
  }
  
  #banner video{
      position: fixed;
      width: 300px !important;
      height: auto !important;
      background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
      background-size: cover;
      transition: 1s opacity;
      z-index:-1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner"&gt;
  &lt;video autoplay  poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop &gt;
    &lt;!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  --&gt;
  
  &lt;source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>