Смотрел видеоурок Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2 с 14:00-17:50. В нем вычисляются размеры видео (в блоке на сайте) в %. Размеры видео - 600*442. Ширина блока контейнера - 1046px (если я конечно правильно понял значение этого числа - 1046px). Есть следующий класс
.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;
}
<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>
Ширина видео в % вычисляется как calc(600/1046*100%)
(flex-basis: 57%
). А высота видео вычисляется как calc(442/1046*100%)
(padding-bottom: 42.25%
). Вот с высотой возникают 2 вопроса:
1. Почему высота равна padding?
2. Почему высота видео 442px делится на ширину контейнера 1046px, а не на высоту сайта?
Возможно я перепутал размеры объектов и расстояния между ними (если что поправьте меня, но скорее всего я не ошибся).
1046px
взято с 1-ой части с 35:15. Если я ошибся, поправьте. Прилагаю макет сайта Relvise - блок Who We Are (только в макете видео не с youtube было взято). Даже не знаю как эффективно загуглить (касательно моей проблемы).