HTML5 video in IE9 is showing a black border on its both sides

Question

I am using a HTML5 video tag in my website. That video is playing perfectly with all browsers, but in IE9 it shows a black border(black extension). It is like the one usually the video players will show some black color extension on its both the side when the size of the player is more than the size of the video.

Answer 1

This is the solution we use.

For video, we display HTML5 by default backed in CDN storage. We also have fall back for Flash and then fall back for non-flash. So it checks HTML5 first, then flash failing that and then no content for non-flash support indicating some message about the user to upgrade their Fred Flintstones machine, we also offer an alternative so they can move out of BedRock!

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 Info

Our code is above (removed the flash so it is more readable). A side thing to note is we add a left and right div column which goes over the video black borders. You can tweak these and even add a bottom and top if needed.

Photo

The green border is actually the white div in opacity so you can sit the effect. It may be hacky but it the best solution we found.

Final

The result is much better as you can see below: