title: Make HTML5 video poster be same size as video itself
body: <p>Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself?</p>
  
  <p>here's a jsfiddle which shows the problem: <a href="http://jsfiddle.net/zPacg/7/" rel="noreferrer">http://jsfiddle.net/zPacg/7/</a></p>
  
  <p>here's that code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png"&gt;
    &lt;source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" /&gt;
    &lt;source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" /&gt;
    &lt;source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" /&gt;
  &lt;/video&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>video{
  border:1px solid red;
  }​
  </code></pre>
  
  <p>Notice that the orange rectangle doesn't scale to the red border of the video.</p>
  
  <p>Also, just adding the CSS below doesn't work either as it rescales the video along with the poster:</p>
  
  <pre><code>video[poster]{
  height:100%;
  width:100%;
  }
  </code></pre>