클립

클립 요소를 사용하면 YouTube 또는 Vimeo와 같은 타사 플랫폼에서 호스팅되는 비디오를 웹 사이트의 어느 곳에나 통합할 수 있습니다.

이 세션에서는 다음 사항에 대해 교육받게 됩니다.

1. 비디오를 추가하는 절차
2. 비디오 구성을 조정하는 방법
3. 비디오 비율 설정
4. 웹사이트에 클립을 포함하는 대체 방법
5. 개인화된 코드를 사용하여 비디오 통합

클립 통합

웹사이트에 클립 요소를 삽입하는 방법에는 두 가지가 있습니다.

• 공개하다 패널 삽입 그리고 동영상 Webflow 캔버스에 요소
• 키입력 명령 + 이자형 (Mac의 경우) 또는 제어 + 이자형 (Windows의 경우) 빠른 찾기 그리고 추구하다 동영상 요소

클립 구성 적용

캔버스에서 클립 요소를 찾은 후 클립 구성 URL과 제목을 입력합니다. 클립 설정에 빠르게 액세스하려면:

• 두 번 탭하세요. 클립 요소
• 선택하세요 클립 요소를 탐색하고 요소 설정 패널(D)

비디오의 URL을 붙여넣고 원하는 경우 제목을 포함시킨 다음 입력하다/반품. 클립의 미리보기 이미지는 클립 요소 내에 표시됩니다.

지원되는 클립 원본

• 유튜브 (향상된 YouTube 동영상 제어를 위해 YouTube 동영상 요소 활용을 고려하세요)
• 비메오
• 데일리모션
• 킥스타터 (메인 캠페인 URL을 붙여넣기만 하면 Webflow가 기본 캠페인 클립을 가져옵니다)
• TED (다국어 지원)
• 위스티아
• 유스트림
• 실시간 스트리밍
• 경련
• 투도
• 훌루
• 새싹동영상

우리를 통해 알려주십시오. 위시리스트 귀하의 클립 원본이 틀에 얽매이지 않는다면 우리는 이를 통합하기 위해 노력할 것입니다!

‍중대한: 현재 클립 요소에 사용하기 위해 자산 패널에 비디오 파일을 제출하는 것은 지원되지 않습니다. 그럼에도 불구하고 비디오를 음소거된 배경 클립으로 업로드할 수 있습니다.

클립 크기 구성

클립 요소는 둘러싸는 컨테이너의 크기를 순응적으로 반영합니다(예: div 블록 내에 배치되면 해당 div 블록의 전체 너비를 상속합니다). 클립에 대해 고유한 너비와 높이를 지정하려면 고유한 div 블록을 생성하세요. div 블록을 드래그하세요. 패널 삽입 div 블록의 너비 및 높이 매개변수를 설정합니다. 클립을 이 개인화된 div 블록과 연결하면 해당 크기가 유지됩니다.

웹사이트에 클립을 통합하기 위한 추가 접근 방식

다음과 같은 다른 구성 요소를 사용하여 웹 사이트에 클립을 삽입할 수도 있습니다.

• 유튜브 클립
• 배경 클립
• 라이트박스
• 리치 텍스트
• 개인화된 코드 삽입

YouTube 클립 요소

그만큼 유튜브 클립 요소를 사용하면 YouTube URL에서 클립을 중첩할 수 있습니다. 이 요소는 채널의 관련 동영상 표시, 특정 시작 시간 지정, 동영상 컨트롤 표시 또는 숨기기 등 YouTube 삽입 기능에서 사용할 수 있는 모든 프레젠테이션 선택 사항을 제공합니다. YouTube 클립 요소에 대해 자세히 알아보세요.

모션 비디오 섹션

그만큼 모션 비디오 섹션을 사용하면 소리 없이 움직이는 영상을 통합할 수 있습니다. YouTube 및 Vimeo URL만 수용하는 비디오 구성 요소와 달리 모션 비디오 섹션은 업로드하는 모든 비디오 파일을 처리할 수 있습니다. 또한 모션 비디오 섹션에는 재생/일시 중지 기능을 위한 내장 토글이 포함되어 있어 사이트 방문자가 비디오 배경을 제어할 수 있습니다. 모션 비디오 기능에 대해 더 많은 통찰력을 얻으십시오.

팝업 모달 비디오 요소

그만큼 팝업 모달 비디오 요소를 사용하면 사이트 방문자가 팝업 모델에서 비디오 클립을 시작할 수 있습니다. 비디오 세그먼트와 마찬가지로 팝업 모달은 YouTube 및 Vimeo URL을 지원합니다. 팝업 모달 비디오 요소에 대해 자세히 알아보세요.

풍부한 콘텐츠가 포함된 텍스트 스타일 요소 및 텍스트 필드

텍스트 스타일 섹션을 사용하면 비디오 콘텐츠도 삽입할 수 있습니다. 이는 CMS 컬렉션 내의 서식 있는 텍스트 필드에서 데이터를 가져오는 데 활용될 때 더욱 강력해집니다.

대안적으로, 동영상 섹션을 사용하여 컬렉션의 비디오 구성 요소에서 데이터를 동적으로 가져올 수 있습니다. 컬렉션 비디오 구성 요소에 대해 자세히 알아보세요.

사용자 정의 코드 삽입을 통해 비디오 추가

다음을 사용하여 HTML 비디오를 통합할 수도 있습니다. 기능 삽입:

1. 액세스 섹션 추가
2. 배치 포함시키다특징 작업 공간에서
3. 당신의 비디오 코드 (HTML의 비디오 요소에 대해 자세히 알아보세요.)
4. 선택하다 저장하고 닫기