Cannot change color of html5 video black bars in IE and iOS

Question

I am attempting to display a video in a responsive design such that the scaling borders blend into the background.

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.

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).

Can anyone help me out with this?

fiddle as requested: 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;
}

***_ edit _***

This is a better fiddle: http://jsfiddle.net/swaEe/40/

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...).

<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

I know some time has already passed since the question was asked, but I also had to implement a workaround for this problem and would like to share. The problem was similar to OP's, in that the video could be any size or aspect ratio.

If the HTML <video> element is contained within a <div> which specifies no size at all, the container will automatically fit itself around the video and it will have no black "padding".

Knowing this, we can take advantage of the loadedmetadata event: we don't actually need the video's dimensions for any calculations, but we must wait for this data to load so that the container will resize. As soon as that happens, we can adjust the container's position horizontally and/or vertically.

Here's a fiddle tested in IE11:

http://jsfiddle.net/j6Lnz31y/

Source (in case the fiddle ever becomes unavailable):

<div class="whatever-container" style="width:200px; height:600px; background-color:red;">
        <div class="video-container">
            <video 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>
    </div>
    <br />


    <div class="whatever-container" style="width:600px; height:200px; background-color:red;">
        <div class="video-container">
            <video 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>
    </div>

---

.whatever-container {
    position: relative;
}

.video-container {
    position: absolute;
    opacity: 0;
}

.video-container > video {
    position: relative;
    width: 100%;
    height: 100%;
}

---

/*
 * After the video dimentions have been acquired, its container will have
 * resized and we can adjust its position as necessary.
 */
function adjustVideoContainer() {
    console.log("video metadata loaded");
    var videoContainer = $(this).parent().filter(".video-container");

    if (videoContainer.length === 0) {
        //abort
        console.log(
            "adjustVideoContainer() was called but no it wasn't "+
            "wrapped in an appropriate container"
        );
        return;
    }
    var containerParent = videoContainer.parent();
    var parentWidth     = containerParent.width(),
        parentHeight    = containerParent.height(),
        containerWidth  = videoContainer.width(),
        containerHeight = videoContainer.height();

    if (containerWidth < parentWidth) {
        videoContainer.css(
            "left",
            (parentWidth - containerWidth) / 2
        );
    }

    if (containerHeight < parentHeight) {
        videoContainer.css(
            "top",
            (parentHeight - containerHeight) / 2
        );
    }
    else {
        videoContainer.height("100%");
    }
    videoContainer.css("opacity", 1);

}

$("video").on("loadedmetadata", adjustVideoContainer);

Answer 2

I think I've managed to come up with a solution:

The problem is that it seems to be impossible to style these letterboxes cross-browser. So the trick then would be not to have letterboxes, by scaling the video element to the aspect ratio of the video file.

This solution has two potential drawbacks:

1. it requires Javascript

2. you need to know the dimensions of the video file and write them into data-attributes

   <video data-video-width="320" data-video-height="240" controls>
   

The reason for this is that the browser does not know the dimensions of the video file until it has started loading it. Most browsers do load a few bytes of the video before it is played, but not all - some older versions of Android wait until the user starts playing the video.

If you do not care about Android 2.3, waiting for the loadedmetadata event to get videoWidth and videoHeight as jaicabs answer does it is the right way.

Take a look at this: run fiddle / fiddle editor

We basically do three things:

1. calculate the aspect ratio of the video
2. resize it so that it fits snugly into its container
3. center it horizontally and vertically within the container

You can now simply set the background-color of the container, and you're done.

I've tested it with iOS 7 on iPhone and iPad, Chrome, Firefox and Safari. No IE testing so far, since I currently don't have my virtual machines handy, but I foresee no problems here for the current IEs.