Соотношения сторон для верстки

[vladdvin]

Смотрел видеоурок 

с 14:00-17:50 В нем вычисляются размеры видео в %. Размеры видео - 600*442. Ширина блока контейнера - 1046px (если я конечно правильно понял значение этого числа - 1046px). Есть следующий класс

<section class="page__whoweare whoweare">
  <div class="whoweare__container _container">
    <div class="whoweare__header header-block">
      <h2 class="header-block__title">Who We Are</h2>
      <div class="header-block__sub-title">
        Problems trying to resolve the conflict between the two major realms <br> of Classical physics: Newtonian mechanics
      </div>
    </div>
    <div class="whoweare__body">
      <div class="whoweare__video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/ef-47vI9PDs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="whoweare__content">
        <div class="whoweare__top">
          <h2 class="whoweare__title">Most trusted in our field</h2>
          <div class="whoweare__text">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way to plan their schedule.</div>
        </div>
        <div class="whoweare__items">
          <div class="whoweare__item item-whoweare">
            <div class="item-whoweare__icon">
              <img src="img/whoweare/icons/01.svg">
            </div>
            <div class="item-whoweare__body">
              <div class="item-whoweare__title">the quick fox jumps over the lazy dog</div>
              <div class="item-whoweare__text">Things on a very small scale ...</div>
            </div>
          </div>
          <div class="whoweare__item item-whoweare">
            <div class="item-whoweare__icon">
              <img src="img/whoweare/icons/02.svg">
            </div>
            <div class="item-whoweare__body">
              <div class="item-whoweare__title">the quick fox jumps over the lazy dog</div>
              <div class="item-whoweare__text">Things on a very small scale ...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

 

.whoweare__body {
  display: flex;
}

.whoweare__video {
  flex: 0 0 57%;
  position: relative;
  padding: 0px 0px 42.25% 0px;
}

.whoweare__video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.whoweare__content {
  flex: 1 1 auto;
}

Скриншот блока страницы

https://i.stack.imgur.com/mAizr.png

Ширина видео в % вычисляется как calc(600/1046*100%) (flex-basis: 57%). А высота видео вычисляется как calc(442/1046*100%) (padding-bottom: 42.25%). Вот с высотой возникают 2 вопроса:

1. Почему высота равна padding?
2. Почему высота видео 442px делится на ширину контейнера 1046px, а не на высоту сайта?