Как сделать высоту видео равным точной высоте букв в строке?
Возник вопрос, можно ли установить высоту видео равным точной высоте букв в строке, думал об иcпользовании тега span.
Ответы (1 шт):
Автор решения: stylok
→ Ссылка
Ничего сложного, если это заведомо известный шрифт*. Учитывайте, что размер шрифта в пикселях не является его настоящей высотой и требует ручной корректировки под высоту блока выраженную в line-height. "Магия" же управления размером видео реализована через object-fit.
*В случае с любым другим шрифтом font-size придётся подбирать вручную заново.
.wrap {
display: flex;
gap: 24px;
align-items: flex-start;
}
.title {
font-family: "Times New Roman";
font-size: 148px;
line-height: 100px;
}
video {
height: 100px;
width: 400px;
object-fit: cover;
}<div class="wrap">
<video controls src="https://sample-videos.com/video321/mp4/480/big_buck_bunny_480p_2mb.mp4"></video>
<span class="title">ARE</span>
</div>