Tailwind CSS 전체 화면 동영상 헤더

구식이라고 부르지만 비디오 헤더를 보는 것을 좋아합니다. 내 개인 웹 사이트에서는 거의 사용하지 않지만 멋진 비디오로 고객을 위해 비디오 헤더를 구현하는 것을 좋아합니다.

오늘 저는 사용자 지정 CSS 없이 이 작업을 얼마나 쉽게 수행할 수 있는지 확인하고 싶었습니다. 우리는 클래스Tailwind CSS만 사용할 것입니다.

최종 결과는 Tailwind CSS만 사용하는 이 놀라운 전체 화면 비디오 헤더입니다.

Tailwind CSS 전체 화면 동영상 헤더

이 헤더를 생성하기 위해 어제의 Tailwind parallax header 을 활용하고 있습니다. 그것은 매우 유사한 설정을 가지고 있지만 지금은 패럴랙스 스크롤로 만들지 않습니다.

기본HTML 구조는 다음과 같습니다.

<header>
  <div>
    Welcome to my site!
  </div>
  <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</header>

헤더 태그를 사용한 것을 볼 수 있습니다. 거기에는 비디오 위에 놓일 블록을 담을 div가 있습니다.
그런 다음 하나 이상의 소스를 보유할 수 있는 비디오 태그가 있습니다.

이제 끝HTML 구조를 적고 각 클래스의 중요도를 살펴보겠습니다.

<header class="relative flex items-center justify-center h-screen mb-12 overflow-hidden">
  <div
    class="relative z-30 p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl"
  >
    Welcome to my site!
  </div>
  <video
    autoplay
    loop
    muted
    class="absolute z-10 w-auto min-w-full min-h-full max-w-none"
  >
    <source
      src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4"
      type="video/mp4"
    />
    Your browser does not support the video tag.
  </video>
</header>

헤더에 사용되는 클래스:

relative : 머리글을 상대적으로 만듭니다. 위치를 지정하기 위해 비디오를 절대적으로 만들 것입니다.

flex : 내부에 텍스트 블록을 정렬할 수 있도록 디스플레이 플렉스를 추가합니다

.

items-center : 텍스트 블록을 세로로 정렬합니다

.

justify-center : 텍스트 블록을 수평으로 정렬합니다

.

h-screen : 이것은 100vh 높이를 추가하므로 뷰포트의 100%가 됩니다.

mb-12 : 이것(3rem)

으로 상당히 큰 마진 바닥을 추가합니다.

overflow-hidden : 비디오가 머리글보다 약간 크므로 오버플로우를 표시하지 않으려 합니다.

그런 다음 오버레이 텍스트 블록에 대해 다음 클래스를 사용합니다.

relative : 비디오 위에 배치하려면 이 상대를 만들어야 합니다

.

z-30 : 동영상의 Z-인덱스보다 높아야 합니다

.

p-5 : 양쪽에 동일한 패딩을 추가합니다(1.25rem)

text-2xl : 텍스트를 멋지고 크게 만듭니다(1.5rem)

text-white : 텍스트를 흰색으로 만듭니다

bg-purple-300 : 쿨한 느낌이 좋은 퍼플 컬러

bg-opacity-50 : 배경의 불투명도가 50%인지 확인합니다.

rounded-xl : 멋진 둥근 테두리를 추가합니다

.

마지막으로 비디오 요소에 대한 클래스를 추가할 수 있습니다.

absolute : 비디오가 절대 위치 지정 요소임

z-10 : 텍스트 블록

보다 낮은 z-인덱스를 제공합니다.

w-auto : 너비가 자동일 수 있으므로 조정됩니다

.

min-w-full : 최소 너비를 100%로 만들어야 합니다.

min-h-full : 최소 높이

도 마찬가지입니다.

max-w-none : 기본 최대 너비를 설정 해제합니다

.

이것으로 모든 수업이 제자리에 있습니다. 이렇게 하면 Tailwind CSS 클래스만 사용하여 매우 멋진 전체 화면 비디오 헤더를 얻을 수 있습니다.

최종 결과는 이 Codepen에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나