Как добавить полноэкранное фоновое видео с помощью Tailwind CSS?

Tailwind CSS — это CSS-фреймворк, который помогает быстро создавать пользовательские интерфейсы. Это низкоуровневый CSS-фреймворк с широкими возможностями настройки, который дает вам все необходимые строительные блоки. Tailwind CSS создает небольшие утилиты с определенным набором параметров, что позволяет легко интегрировать существующие классы непосредственно в код HTML.

В этой статье мы увидим, как добавить полноэкранное фоновое видео в Tailwind CSS. Используя некоторые классы попутного ветра, мы можем сделать полноэкранный видеофон, покрывающий весь экран браузера.

Классы попутного ветра:

• относительный : он устанавливает относительный элемент заголовка и делает видео абсолютным, чтобы позиционировать его.
• flex : добавляет гибкость отображения, чтобы мы могли выровнять текстовый блок внутри.
• items-center : выравнивает текстовый блок по вертикали.
• justify-center : выравнивает текстовый блок по горизонтали.
• h-экран: добавляет высоту 100vh, поэтому видео масштабируется до 100% высоты области просмотра.
• mb-12: Это добавляет большое значение margin-bottom (3rem).
• overflow-hidden : делает видео больше, чем заголовок, поэтому мы не хотим показывать переполнение.
• absolute : Делает элемент с абсолютным позиционированием видео.
• z-10 : Это дает видео более низкий z-индекс, чем наш текстовый блок, чтобы держать его на заднем плане.
• w-auto : Ширина может быть «авто», чтобы она регулировалась соответствующим образом.
• min-w-full : делает минимальную ширину равной 100%.
• min-h-full: делает минимальную высоту равной 100%.
• max-w-none : отменяет максимальную ширину по умолчанию.

Шаги по добавлению полноэкранного фонового видео в HTML.

Шаг 1. Добавьте ссылку на CDN Tailwind CSS в раздел head кода с помощью тега script.

<script src=”https://cdn.tailwindcss.com”></script>

Шаг 2: Добавьте тег <video>.

<video src=

“https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4”>

</video>

Шаг 3: Определите классы для добавления видео в полноэкранный фон.

<video src=

“https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4”

 className=”absolute z-10 w-auto min-w-full min-h-full max-w-none”></video>

Пример 1. В приведенном ниже примере показано, как добавить полноэкранное фоновое видео с помощью Tailwind CSS.

В данном примере мы использовали элемент <video> для добавления видеоисточника в фоновом режиме, а видео устанавливается в полноэкранном режиме с помощью CSS-классов попутного ветра, как описано выше.

Выход:

Пример 2. В приведенном ниже примере показано полноэкранное фоновое видео с кнопкой вверху с использованием Tailwind CSS.

В данном примере мы использовали HTML-тег заголовка, а также HTML-элемент <div>, который будет содержать блок, чтобы он располагался поверх видео. Наряду с этим тег <video> используется для хранения видео или нескольких источников.

Выход: