HTML5 video in IE9 shows a black border on both sides

Question

I am using the HTML5 tag on my website. This video plays nicely in all browsers, but in IE9 it shows a black frame (black extension). This is similar to the fact that, as a rule, video players will show some black extension on both sides when the player is larger than the video.

Answer 1

This is the solution we are using.

For video, we display the default HTML5 stored in the CDN repository. We also return to Flash and then backtrack for non-flash. This way, it checks HTML5 first and then the flash crashes and then there is no support content without flash indicating some message that the user is updating his Fred Flintstones machine, we also offer an alternative so that they can exit BedRock!

The code

<style type="text/css"> .videobox{position:relative;width:300px;500px} #video_box_id_css, .video_box_class{border:0px !important} /* BACKGROUND SHOULD BE PAGE BACKGROUND */ .left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff} .right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff} </style> <div class="videobox"> <video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500"> <source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/> <source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/> <source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/> <!-- ALTERNATIVE CONTENT LIKE SWF VIDEOS FOR NON HTML5 BROWSER //--> </video> <div class="left"></div> <div class="right"></div> </div> 

Code Information

Our code is above (remote flash, so it is more readable). It should be noted that we add the left and right columns of the div that cross the black borders of the video. You can customize them and even add bottom and top if necessary.

A photo

The green border is actually a white div in opacity so you can sit. It may be hacks, but this is the best solution we have found.

The final

The result is much better, as you can see below:

Answer 2

I had this problem before, usually the problem is in the video itself. When you encode your video, try to match the settings as closely as possible to what you will use in your tag. This should not be an obstacle for you, as soon as you check the video a little closer, you should see a discrepancy.