Смотрел видеоурок
с 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, а не на высоту сайта?
vladdvin changed their profile photo