Video Editing Guide

비디오를 삽입하고 스타일을 설정하여, 고객의 브랜드와 목적에 맞게 동영상을 쉽게 적용할 수 있습니다.

비디오 적용 (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://dyqqilhexbdksxumpfpu.supabase.co/storage/v1/object/public/startupful-images/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 속성을 추가하여 비디오에 플레이어 제어 기능을 활성화할 수 있습니다.

이 가이드를 통해 고객님의 디자인에 비디오를 손쉽게 적용하고 스타일링할 수 있습니다.