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:

css: video { width: 500px; background: blue; } ``` ***_ edit _*** This is a better fiddle: http://jsfiddle.net/swaEe/40/ The video playback should s…

Accepted Answer

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:

- it requires Javascript

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:

- calculate the aspect ratio of the video

- resize it so that it fits snugly into its container

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

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

Solution

Problem