Removing the black bar on top and bottom of html5 videos in Chrome and Safari browsers

Question

I am using html5 video. In FireFox it is running well but in chrome and safari, it is showing a thick black bar top and bottom. How to get rid of this bars?

the code,

<video autoplay loop="loop" onended="this.play()" width="100%">
     <source src="videos/video.mp4" type="video/mp4"/>
     <source src="videos/video.webm" type="video/webm" />
</video>

Thanks in advance

Answer 1

Take a look at the dimensions and/or CSS of the tag containing your video tag. That will probably be a div. I had one with height:100%. Once i removed it, it solved the problem.

Hope it helps.