9мес

Помогите с css

Html

1234567

 <div class="header_text_button_center">  
        <video class="video" autoplay loop muted> 
            <source src="../videos_animation/1.mp4"type="video/mp4"></source> 
        </video> 
        <a class="info" href="">Lorem ipsum dolor sit amet consectetur,</a>  
        <button class="button">смотреть</button>  
</div>

Css

12345678910

 .header_text_button_center { 
    display: grid; 
    grid-template-columns: 3fr 1fr; 
    grid-template-rows: 30rem 70px;  
} 
 
.video { 
    grid-row-start: 1; 
    grid-row-end: 3; 
}

Проблема в том, что при увеличении видео оно должно увеличиваться как в ширину, так и в высоту. В общем, как можно сделать так, чтобы при увеличении или при уменьшении видео в высоту кнопки и текст справа всегда подстраивались под высоту видео.

Чтобы было как-то так.

Дополнен

Я буду делать адаптив под планшет и мобильную версию, но, по идее, для удобства желательно, чтобы кнопки подстраивались под высоту.

По дате

По рейтингу

z9xsvoipgjphzyl

Новичок

9мес

Так и будет если установить пропорциональную высоту ячеек грида.
Как вариант::
grid-template-rows: repeat(10, 1fr); /* 10 строк, каждая занимает 1/10 высоты контейнера */

В левой колонке объединить все 10 строк под блок для видео-контейнера.

Для адаптива лучше сразу верстать с использованием grid-template-areas
Будет удобнее забрасывать ячейку в разные места. Например ячейку «Пуск» закинуть под видео..