after removing the vertical black bars from youtube embedded video, the video is taking more than 10-CodePudding

I have used an embedded YouTube video on my html. Then some vertical black bar (right and left) has appeared. So I have fixed that by doing this

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

But after that, the video is taking more than 100vh height, which I don't want.

How can I keep the height 100vh and vanish the vertical bar as well?

CodePudding user response：

You can try max-height attribute instead of min-height attribute and erase height:0; I think you don't need that when the other height attributes exists.

CodePudding user response：

Not sure why you need the padding-bottom, but if you do, you can consider using the box-sizing property.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing