after removing the vertical black bars from youtube embedded video, the video is taking more than 100vh

user_5534469 0
Viewed 158

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?

youtube-api css html
2 Answers

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.

user_148058350
user_55237370
Related