Как создать адаптивный фон видео (HTML5)?

Question

Я наткнулся на этот сайт: https://hinge.co/ и попытался проследить за HTML / CSS, чтобы узнать, как у них плавный, отзывчивый фон HTML5-видео.

Я столкнулся с несколькими свойствами, которые я не понимаю, например:

max-width: calc(177.778vh);
height: calc(56.25vw);

Я понимаю, что это плагин JS, который они используют, и значения в calc являются динамическими. Но почему высота будет более 100? Разве это не будет больше, чем само окно просмотра? Похоже, видео имеет точный размер области просмотра, поэтому я не понимаю логику здесь.

Кто-то создал что-то подобное раньше и может помочь понять, как это делается?

Answer 1

Я наткнулся на этот сайт: https://hinge.co/ и попытался проследить за HTML / CSS, чтобы узнать, как у них плавный, отзывчивый фон HTML5-видео.

Онине использовал элемент видео HTML5.Они встроили видео из Vimeo, а затем разместили его с помощью CSS.

---

Я понимаю, что это плагин JS, который они используют, и значения в calc являются динамическими.Но почему высота будет более 100?

Вероятно, они сделали это, чтобы сохранить правильное соотношение сторон видео при любом размере экрана.

---

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

Это переполняет оболочку.Который переполнен как скрытый.

---

Аналогичный пример: https://startbootstrap.com/snippets/video-header/ (Не совсем то же самое, но здесь используется HTML5 элемент видео для фона видео)

Элемент HTML видео на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Answer 2

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

Что такое трюк

min-height: 100vh;
min-width: 177.77vh;

, что гарантирует, что видео будет охватывать весь экран и более, независимо от размера / формы видео (по вертикали или горизонтали).