Before the HD screen era, videos were usually made in the 4:3 format, so this screen ratio was the standard for a while. Nowadays, with widescreen displays being the norm, 16:9, 16:10, 22:10 etc. are the most common screen ratios.
So what happens when we play a video with an old aspect ratio on a new widescreen, or vice versa? That’s how black bars appear.
The exact same thing occurs with online videos; however unlike the bars on TV screens, these bars can be eliminated with some fiddling with the padding of the video section on your website page.
Here’s what you can do to get rid of the video black bars. To keep everything responsive, you should set the height to for example zero, and use the padding “hack” to keep the aspect ratio of the video (in our example a 16:9 video):
9/16 * 100 = 56.25%
This number can be either the padding-top or the padding-bottom value. Since the padding is expressed in percentage, this scales the padding in relation to the width, keeping the correct ratio no matter what width you size the video to.
As you can see from the screenshot below, the black bars are now gone after we added the custom code for decreasing the padding-top value to 56.25%.
You can add the custom CSS in the Appearance -> Customize -> Additional CSS field.
.single-portfolio-item .fluidvids {
padding-top : 56.25% !important;
}