Проблема с iframe (youtube) с padding-bottom

Question

Мне нужно добавить видео с Youtube в определенных пределах (красная рамка на скриншоте).Чтобы добавить видео в этих пределах, мне нужно использовать padding-bottom: 36%.Из-за этого вы не можете нажать нижний блок (с датой).

Если я уменьшу этот отступ внизу, блок с датойперемещается в нужное место, но высота также уменьшается.Вот часть css:

.calendar__general-slyde-video {
position: relative;
padding-bottom: 36%;
height: 0;
overflow: hidden;
width: 315px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
}

Буду благодарен за любую помощь!

Answer 1

хорошо, если ссылка, которую вы указали, является вашим кодом, и ваша проблема в том, чтобы поместить календарь чуть ниже самого левого сообщения, т.е. "calendar__changing-content" div, то вот некоторые из проблем, которые я обнаружил

Во-первых, у вашего calendar__general-slyde-video clearfix есть height:0, что означает, что ваше видео помещается в отступ div (который представляет всю его высоту)

во-вторых, ваш "calendar__changing-content" div не содержит своих детей в одном ряду (при условии, что это именно то, что вы хотели, основываясь на данной картинке), следовательно, ваш календарь находится в нужном месте, но высота его родного брата велика, что делает его искаженным .

вот решение для них: добавьте высоту к видео и удалите отступы, также добавьте высоту iframe 100%, также вы можете удалить высоту с других детей, если хотите.

.calendar__general-slyde-video {
 position: relative;
overflow: hidden;
width: 315px;
height: 233px;
}

.calendar__general-slyde-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

вот код ручки

это должно решить вашу проблему, также вы можете использовать reset.css, чтобы удалить настройки браузера по умолчанию (просто предлагая)