VideoBackground

@hua-labs/ui

v1.1.0

Pro

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

히어로 섹션을 위한 비디오 배경 컴포넌트입니다. 네이티브 HTML5 비디오, YouTube, Vimeo를 지원하며 세련된 오버레이와 페이드 효과를 제공합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { VideoBackground } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

지원하는 비디오 소스

Native Video

MP4, WebM, Ogg

type="native"

YouTube

YouTube 비디오 ID

type="youtube"

Vimeo

Vimeo 비디오 ID

type="vimeo"

데모 미리보기

비디오 배경 히어로

YouTube, Vimeo, 또는 자체 비디오로 멋진 히어로 섹션을 만드세요

오버레이 옵션

Solid Overlay

overlay overlayColor="rgba(0,0,0,0.4)"

Gradient Overlay

gradient gradientDirection="bottom"

모범 사례

권장 사항

• 자동재생을 위해 muted 사용
• 모바일에서는 poster 이미지 제공
• 텍스트 가독성을 위해 overlay 사용
• 비디오 파일은 압축하여 최적화

주의 사항

• YouTube/Vimeo는 임베드 제한이 있을 수 있음
• 모바일에서 자동재생이 제한될 수 있음
• 대역폭을 고려하여 비디오 품질 선택

Props

이름	타입	기본값	설명
`src*`	`string`	-	비디오 소스 (URL, YouTube ID, 또는 Vimeo ID)
`type`	`"native" \| "youtube" \| "vimeo"`	`"native"`	비디오 소스 타입
`poster`	`string`	-	포스터 이미지 URL (비디오 로드 전 표시)
`autoPlay`	`boolean`	`true`	자동 재생
`loop`	`boolean`	`true`	반복 재생
`muted`	`boolean`	`true`	음소거 (대부분의 브라우저에서 자동재생에 필요)
`controls`	`boolean`	`false`	비디오 컨트롤 표시
`objectFit`	`"cover" \| "contain" \| "fill"`	`"cover"`	비디오 맞춤 모드
`overlay`	`boolean`	`true`	색상 오버레이 표시
`overlayColor`	`string`	`"rgba(0, 0, 0, 0.4)"`	오버레이 색상
`gradient`	`boolean`	`false`	단색 대신 그라디언트 오버레이 사용
`gradientDirection`	`"top" \| "bottom" \| "both"`	`"bottom"`	그라디언트 방향
`playbackRate`	`number`	`1`	재생 속도 (네이티브 비디오만)
`fadeIn`	`boolean`	`true`	비디오 로드시 페이드 인 효과

코드 예시

docs:components.video-background.accessibility.nativeVideo

import { VideoBackground } from '@hua-labs/ui/advanced';

<VideoBackground
  src="/hero-video.mp4"
  overlay
  gradient
  gradientDirection="bottom"
>
  <HeroContent />
</VideoBackground>

docs:components.video-background.accessibility.youtube

<VideoBackground
  type="youtube"
  src="W0LHTWG-UmQ"  // ISS Earth Timelapse
  overlay
  overlayColor="rgba(0, 0, 50, 0.6)"
/>

docs:components.video-background.accessibility.vimeo

<VideoBackground
  type="vimeo"
  src="123456789"
  gradient
  gradientDirection="both"
/>

접근성

•장식적 콘텐츠: 배경 비디오는 장식적 요소로 간주되어 alt 텍스트가 필요하지 않습니다
•콘텐츠 레이어: 콘텐츠는 적절한 포커스 관리를 위해 높은 z-index 레이어에 배치됩니다
•포스터 대체: 비디오가 재생되지 않을 때 포스터 이미지가 시각적 콘텐츠를 제공합니다

CarouselPro TiltCardPro