비디오 - Webflow 도움말

비디오 요소를 사용하면 YouTube나 Vimeo 같은 타사 사이트에 호스팅된 비디오를 사이트 어디에나 임베드할 수 있습니다.

비디오 추가 방법

사이트에 비디오 요소를 추가하는 방법은 두 가지입니다:

• 추가 패널을 열고 비디오 요소를 Webflow 캔버스로 드래그 앤 드롭하세요.
• Command + E (Mac) 또는 Control + E (Windows)를 눌러 빠른 찾기를 열고 비디오 요소를 검색하세요.

비디오 설정 형식화 방법

캔버스에 비디오 요소를 배치하면 비디오 설정에 접근할 수 있으며, 여기서 URL과 제목을 추가할 수 있습니다. 비디오 설정에 빠르게 접근하려면:

• 비디오 요소를 더블 클릭하세요.
• 비디오 요소를 선택하고 요소 설정 패널 (D)로 이동하세요.

비디오 URL을 붙여넣고, 제목을 추가한 후 Enter / Return 키를 누르세요. 비디오 요소에 비디오의 썸네일이 나타납니다.

지원되는 비디오 소스

• YouTube (YouTube 비디오에 대한 더 많은 제어가 필요하다면 YouTube 비디오 요소를 사용해 보세요.)
• Vimeo
• DailyMotion
• KickStarter (주 캠페인 URL을 붙여넣기만 하면 Webflow가 주 캠페인 비디오를 가져옵니다.)
• TED (다국어 지원)
• Wistia
• Ustream
• Livestream
• Twitch
• Tudou
• Hulu
• SproutVideo
• Vidzflow

비디오 크기 설정 방법

비디오 요소는 부모 컨테이너의 크기를 따릅니다 (예: div 블록에 넣으면 해당 div 블록의 전체 너비를 차지합니다). 비디오에 사용자 지정 너비와 높이를 설정하려면 사용자 지정 div 블록을 만들 수 있습니다. 이를 위해 추가 패널에서 div 블록을 드래그하여 div 블록에 너비 값과 높이 값을 지정하세요. 이제 이 사용자 지정 div 블록에 비디오를 드래그하면 해당 크기에 맞게 조정됩니다.

사이트에 비디오를 추가하는 다른 방법

다음과 같은 다른 요소를 사용하여 사이트에 비디오를 추가할 수도 있습니다:

• YouTube 비디오
• 배경 비디오
• 라이트박스
• 리치 텍스트
• 사용자 지정 코드 임베드

YouTube 비디오 요소

YouTube 비디오 요소를 사용하면 YouTube URL에서 비디오를 임베드할 수 있습니다. 이 요소는 YouTube의 임베드 기능에서 제공하는 모든 디스플레이 옵션을 제공하며, 채널의 관련 비디오를 표시하거나 특정 시작 시간을 설정하고, 비디오 컨트롤을 표시하거나 숨기는 등의 기능을 제공합니다. YouTube 비디오 요소에 대해 더 알아보기.

배경 비디오 요소

배경 비디오 요소를 사용하면 오디오 없이 모션 배경을 추가할 수 있습니다. 비디오 요소는 YouTube 및 Vimeo 링크만 지원하는 반면, 배경 비디오 요소는 업로드한 모든 비디오 파일을 수용할 수 있습니다. 배경 비디오 요소에는 내장된 재생/일시정지 토글이 있어 사이트 방문자가 원하는 대로 배경 비디오를 재생하거나 일시정지할 수 있습니다. 배경 비디오 요소에 대해 더 알아보기.

라이트박스 요소

라이트박스 요소는 사이트 방문자가 비디오를 팝업 모달로 열 수 있게 합니다. 비디오 요소와 유사하게, 라이트박스는 YouTube와 Vimeo 링크를 지원합니다. 라이트박스 요소에 대해 더 알아보기.

리치 텍스트 요소와 리치 텍스트 필드

리치 텍스트 요소를 사용하면 비디오를 추가할 수도 있습니다. 이는 리치 텍스트 필드에서 데이터를 가져올 때 더욱 강력합니다. 또는 비디오 요소를 사용하여 컬렉션의 비디오 필드에서 데이터를 동적으로 가져올 수도 있습니다. 컬렉션 비디오 필드에 대해 더 알아보기.

커스텀 코드를 사용하여 비디오 임베드하는 방법

임베드 요소를 사용하여 HTML 비디오를 추가할 수도 있습니다:

1. 추가 패널로 이동
2. 임베드 요소를 캔버스로 드래그
3. 비디오 코드 붙여넣기 (HTML의 비디오 요소에 대해 더 알아보기)
4. 저장 및 닫기 클릭

---

웹플로우 도움말로 돌아가기