Адаптивное видео с Youtube Проблема с высотой

Question

Возникла проблема при создании адаптивной версии видео с 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

Не пойму почему по высоте растягивает

Answer 1

Данному элементу нужно убрать отступы (ну или установить нужные) и установить высоту.

.frame_blc {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 860px;
    height: 100%;
}

CodePen

Answer 2

body {
  margin: 0;
}

iframe, .frame_blc {
  display: block;
  width: 100%;
  height: 100%;
}

.wrapperBlock {
  max-width: 300px;
  height: 100px;
}

<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>

БЛОГ НА HUSL

Адаптивное видео с Youtube Проблема с высотой

Ответы (2 шт):