title: Cannot change color of html5 video black bars in IE and iOS
body: <p>I am attempting to display a video in a responsive design such that the scaling borders blend into the background.</p>
  
  <p>I allow the dimensions of the video element to vary within specified bounds.  As a result, when the video playing doesn't fill the actual html element, I get the black padding bars around my video.</p>
  
  <p>Using the css background property I have been able to change the color of the bars shown in Chrome, FireFox, and Opera.  I cannot figure out how to change the color shown for Internet Explorer or iOS (ipad).</p>
  
  <p>Can anyone help me out with this?</p>
  
  <p>fiddle as requested: <a href="http://jsfiddle.net/swaEe/">http://jsfiddle.net/swaEe/</a></p>
  
  <pre><code>html:
  
  &lt;video width="320" height="240" controls&gt;
    &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
    &lt;source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"&gt;
  Your browser does not support the video tag.
  &lt;/video&gt;
  
  css:
  
  video {
      width: 500px;
      background: blue;
  }
  </code></pre>
  
  <p><em><strong></em>***</strong><em>_</em> edit <em>_</em><strong><em>*</em>**</strong></p>
  
  <p>This is a better fiddle: <a href="http://jsfiddle.net/swaEe/40/">http://jsfiddle.net/swaEe/40/</a></p>
  
  <p>The video playback should stay vertically and horizontally centered in the container.  I want the "bars" to be transparent or the same color as the container (red in this case...).</p>
  
  <pre><code>&lt;div style="width:200px; height:600px; background-color:red;"&gt;
      &lt;video width="100%" height="100%" style="background-color:red;" controls&gt;
        &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
        &lt;source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"&gt;
      Your browser does not support the video tag.
      &lt;/video&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div style="width:600px; height:200px; background-color:red;"&gt;
      &lt;video width="100%" height="100%" style="background-color:red;" controls&gt;
        &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
        &lt;source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"&gt;
      Your browser does not support the video tag.
      &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>