Embed youtube video height issue - html

Question

I'm trying to embed a youtube video into my project, it works and I also tried to apply a 16:9 ratio with padding-bottom: 56.25% like as most tutorials out there.
The issue is, the height of video is happened to be 100% of the container, What should I fix in my CSS to get rid of the top/bottom blackbar?
Here's my code pen attemp: https://codepen.io/DieByMacro/pen/QXmJez
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
max-width: 720px;
padding-top: 25px;
padding-bottom: 56.25%;
}
.HomePage-homeVideoWrapper-274 iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
<div class="HomePage-homeVideoWrapper-274">
<iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

Answer 1

This is very common problem which we are facing while we add a videos on our template.You just need to add max-width and width property on OUTER div not at HomePage-homeVideoWrapper-274. No need to added max-height in HomePage-homeVideoWrapper-274.
.outer {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
iframe {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
}
<div class="outer">
<div class="HomePage-homeVideoWrapper-274">
<iframe src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial"></iframe>
</div>
</div>
Demo