비디오를 삽입하고 스타일을 설정하여, 고객의 브랜드와 목적에 맞게 동영상을 쉽게 적용할 수 있습니다.
비디오 적용 (video source src)
비디오는 video 태그의 source 속성을 사용하여 삽입할 수 있습니다. 아래 예시에서 src 속성을 통해 원하는 비디오 URL로 교체하면 비디오가 적용됩니다.
<video class="absolute inset-0 w-full h-full object-cover opacity-70" autoplay loop muted playsinline>
<source src="https://cdn.startupful.io/video/blue-flame-1.mp4" type="video/mp4">
</video>
수정 방법
-
비디오 URL:
source 태그의 src 속성에 원하는 비디오 파일의 URL을 입력하세요.
-
비디오 형식:
type 속성에서 비디오 형식을 지정합니다. 예시에서는 type="video/mp4"로 설정되어 있습니다.
-
자동 재생 (
autoplay): 비디오가 페이지 로드 시 자동으로 재생됩니다.
-
반복 재생 (
loop): 비디오가 끝나면 자동으로 다시 재생됩니다.
-
음소거 (
muted): 비디오가 소리 없이 재생됩니다.
-
인라인 재생 (
playsinline): 모바일 기기에서 전체 화면으로 전환되지 않고 인라인으로 재생됩니다.
스타일링 클래스
-
absolute inset-0: 비디오가 부모 요소의 모든 가장자리에 맞춰 배치됩니다.
-
w-full h-full: 비디오가 부모 요소의 전체 너비와 높이를 차지하도록 설정합니다.
-
object-cover: 비디오가 요소의 크기에 맞게 잘리거나 확장되어 전체를 채우도록 설정합니다.
-
opacity-70: 비디오의 불투명도를 70%로 설정하여 약간 투명하게 만듭니다.
비디오 편집 팁
-
크기 및 비율:
w-full, h-full 클래스를 사용해 비디오 크기를 조정하거나 특정 영역에 맞게 설정하세요.
-
반응형 비디오: 다양한 화면에서 비디오가 잘리지 않고 비율을 유지하려면
object-cover를 사용하여 비디오의 비율을 조절합니다.
-
시작, 중지 및 제어 추가: 필요에 따라
controls 속성을 추가하여 비디오에 플레이어 제어 기능을 활성화할 수 있습니다.
이 가이드를 통해 고객님의 디자인에 비디오를 손쉽게 적용하고 스타일링할 수 있습니다.