Возникла проблема при создании адаптивной версии видео с YouTube. При вставке высота видео почему-то растягивается. Как это поправить, чтобы было пропорционально ширине?
body {
width: 100%;
margin: 0;
}
.wrapperBlock {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex: 1 1 auto;
height: 100vh;
background: #000;
}
.frame_blc {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
width: 100%;
max-width: 860px;
height: 0;
}
.frame_blc iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="wrapperBlock">
<div class="frame_blc">
<iframe src="https://www.youtube.com/embed/7iNbnineUCI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Тут показывает. https://codepen.io/BlackStar1991/pen/JjGOjKg
Не пойму, почему по высоте растягивает.