title: How to stop a video tag overflowing its container div.
body: <p>What I need is part of this video to be hidden if its over the containers height. </p>
  
  <p>I thought that overflow hidden would be the solution here but somehow it doesn't seem to want to listen. </p>
  
  <p>code: </p>
  
  <pre><code>body,
  html,
  .container,
  #video-background {
      height: 100%;
      margin: 0;
      padding: 0;    
  }
  
  html {
      overflow-x:hidden;
  }
  
  #video-background {
      min-width: 100%;
      min-height: 100%;
  
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; 
  
      width: 100%;
      height: 100%;    
  
  }
  
  @media (min-aspect-ratio: 16/9) {
    #video-background {
      width: 100%;
      height: auto; /* actually taller than viewport */
     }
  }
  @media (max-aspect-ratio: 16/9) {
     #video-background {
       width: auto; /* actually wider than viewport */
       height: 100%;
     }
  }
  </code></pre>
  
  <p>Here is my JSfiddle </p>
  
  <pre><code>https://jsfiddle.net/dqbq29ru/3/
  </code></pre>
  
  <p>Also it would be worth finding out or mentioning in comments if you've had problems with the video element in ie9 or up. </p>
  
  <p>Many thanks</p>