CODEWITHSUNDEEP
htmlgoogle-chrome
kd7
kd7

Reputation: 513

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

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

Upvotes: 4

Views: 28781

Answers (5)

Conrado Lopez
Conrado Lopez

Reputation: 161

Set "clip-path: inset(2px 2px);" to the video tag.

video {
  clip-path: inset(2px 4px);
}

// UPDATE 13 sept 2024 In some cases the previous solution does not work but this one does (using fill-box instead of inset and adding an imperceptible border-radius):

video {
  clip-path: fill-box;
  border-radius: 0.01px;
}

OR

div.video-container {
  clip-path: fill-box;
  border-radius: 0.01px;
  overflow:hidden;
}

Sources: https://stackoverflow.com/a/78334931/3610112 and https://stackoverflow.com/a/78920110

Upvotes: 2

lilo.jacob
lilo.jacob

Reputation: 2414

I had the same issue. I solved it by setting css style for video tag:

outline: none;

Upvotes: 0

Curtis
Curtis

Reputation: 71

For me, it was line-height. Setting line-height: 0 on the parent element of fixed the issue.

Upvotes: 5

user6884687
user6884687

Reputation: 21

Are the blackbars already in the actual video?? My solution is to play the video in a 16/9 iframepage and adjust top (..-px), left (..-px), height (..%) (OR width %) untill they are overscaled in an external .fullscreen-bg .css

Upvotes: 0

Shadowxvii
Shadowxvii

Reputation: 1120

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.

Upvotes: 9

Related Questions