无法在IE和iOS中更改html5视频黑条的颜色

Question

我试图在响应式设计中显示视频,以便缩放边框融入背景.

我允许视频元素的尺寸在指定的范围内变化.因此,当视频播放没有填充实际的html元素时,我的视频周围会出现黑色填充条.

使用css background属性,我可以更改Chrome,FireFox和Opera中显示的条形颜色.我无法弄清楚如何更改Internet Explorer或iOS(ipad)显示的颜色.

任何人都可以帮我解决这个问题吗？

根据要求提供小提琴:http://jsfiddle.net/swaEe/

html:

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

css:

video {
    width: 500px;
    background: blue;
}

***_编辑_ ***

这是一个更好的小提琴:http://jsfiddle.net/swaEe/40/

视频播放应在容器中垂直和水平居中.我希望"条形"透明或与容器颜色相同(在这种情况下为红色......).

<div style="width:200px; height:600px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>

Answer 1

用css作为背景的div怎么样？【我对iOS不熟悉，在IE11上尝过】

html:

<div id="container"> 
<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

CSS：

video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#container{
    width: 500px;
    height: 240px;
    background: blue;
}

jsfiddle： http: //jsfiddle.net/c9aHf/1/