Hi @greta0,
Can you provide a link with an example for your video? We might need to see the context.
When I add a video using the WordPress classic editor or Gutenberg, the video is embedded as a responsive video, and I do not see black bars. You may have a special case.
Following is more of a technical treatment of this issue.
In general, to avoid seeing the black bars (background), you’ll want to do two things.
1. Make sure your video is responsive, so that it changes size with its container.
2. Make sure the video container is the same aspect ratio as the video.
The aspect ratio is the width divided by the height of the video. You see the black bars, when the video viewer is too tall or too wide for the video. If you make sure the viewer is the same ratio as the video, you should not see the black bars.
Depending on your case, you may need to edit the CSS code to constrain the height and width of your video’s container. The container would be some kind of HTML tag surrounding the viewer.
Here is an explanation about creating a responsive video: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
In the examples presented in the article, they use an aspect ratio of 16:9. If you had a video with width 1600px and height 900px, that would be 16:9. If you divide that in half, you get 800px by 450px, and that’s still 16:9 ratio.
If you use the strategy described in the article to vary the height of your video’s container as a function of its width, you would divide the video’s width by its height to get a decimal percent you can apply to the bottom-padding style. 16:9 would be 9 divided by 16, or 56.25%.
I hope some of this helps!
