⚠️참고: 타사 사이트에 동영상을 임베드할 수 있지만 특정 사이트의 문제를 해결하는 데 Vimeo에서 도움을 드릴 수는 없다는 점을 이해해 주세요.
동영상의 임베드 코드는 여러 가지 방법으로 찾을 수 있습니다.
-
동영상 설정 페이지: 동영상 편집 페이지의 오른쪽 상단에 있는 임베드 버튼을 클릭하면 동영상의 임베드 코드를 찾을 수 있습니다.모달 창이 열리면 고정형 코드와 반응형 코드 중에서 선택하고 임베드 코드를 수동으로 커스텀할 수 있습니다.임베드 코드가 클립보드에 복사됩니다.
-
동영상 공유 라이트 박스: 동영상 플레이어나 공개 동영상 페이지 내에 있는 공유 버튼(종이비행기 아이콘)을 클릭하면 나타나는 라이트 박스에서 임베드 코드를 확인할 수 있습니다.임베드 코드에 사용자 맞춤 설정을 적용하려면 +옵션 표시를 클릭하세요.새 옵션에서는 자동/반복 재생, 색상 변경, 플레이어 크기 등 여러 가지 설정이 가능하며, 임베드 코드에 자동 반영됩니다. (일부 옵션은 동영상 임베드 설정이나 텍스트 에디터 내에서도 가능합니다.)설정이 다 끝나면 임베드 코드 박스에서 최종 코드를 복사하세요.
-
라이브러리: 그리드 또는 목록 보기에서 동영상 옆에 있는 공유 아이콘을 클릭하고 임베드 코드 복사를 선택합니다.(이 코드는 크기값이 고정되어 있습니다.)
임베드된 플레이어의 크기 조정하기
임베드 코드는 고정된 크기가 기본값으로 설정되어 있으며 동영상을 원본대로 유지할 수 있도록 원본의 크기로 자동 입력되어 있습니다.
더 크거나 작은 플레이어를 원하시면 높이와 폭 값을 조정한 후 웹페이지에 코드를 붙여넣으세요. 원래 파일과 동일한 비율의 크기를 사용하는 것이 바람직합니다. 예를 들어, 동영상이 1920 x 1080인 경우, 640 x 360과 같이 16:9 비율의 크기를 사용하세요.
반응형(Responsive) 임베드
반응형 동영상은 특정 화면이나 윈도우 크기에 따라 자동으로 최적화됩니다. 반응형 임베드 코드를 사용하면, 동영상 플레이어를 삽입한 컨테이너의 크기에 따라 알맞게 조정되지만, 동영상의 원본 비율은 그대로 유지합니다. 따라서, 동영상 플레이어의 아이프레임 크기를 바꾸기 위해서는 웹페이지 내의 상위 컨테이너를 조정해야 합니다. 이 부분은 Vimeo 임베드 코드로 조정할 수 없습니다.
반응형 임베드 코드는 동영상이 비공개가 아닌 경우 동영상 페이지(예: vimeo.com/XXXXX)의 공유 메뉴에서 찾거나 단순 설정 페이지의 임베드 모달에서 찾을 수 있습니다. 동영상 페이지에 접속해 동영상 플레이어 내에 있는 공유 아이콘(종이비행기 아이콘)을 클릭합니다. 공유 창이 뜨면 오른쪽 상단 모서리에 있는 +옵션 표시를 클릭한 다음 '반응형'을 선택합니다. 임베드 섹션에 있는 코드는 새로운 div wrapper와 스크립트 태그를 자동으로 반영합니다. 이 구성요소로 아이프레임이 최적화됩니다.
⚠️참고: 이 라이트박스는 현재 공개 동영상 및 vimeo.com에서 비밀번호로 보호된 동영상에만 표시됩니다.
반응형 코드가 특정 웹페이지 테마와 레이아웃에서 원활히 작동하지 않을 수 있습니다.반응형 코드가 제대로 작동하지 않는다면, 고정된 크기의 임베드 코드 사용을 권장합니다.
동영상 카드를 사용한 경우에는 자동으로 반응형 임베드 코드가 생성되는 점 참고해 주시기 바랍니다.카드에서 자세히 알아보세요.
Vimeo 아이프레임 스타일링하기
웹 페이지 스타일 지정은 플레이어 iframe의 크기와 위치에 영향을 줄 수 있습니다. 이 현상은 Wordpress, Wix, Squarespace와 같이 웹 페이지 빌더에 이미 만들어진 테마 또는 플러그인을 사용할 때 자주 일어납니다. 임베딩 코드에서 크기를 올바르게 설정했으나 Vimeo 플레이어에서 다르게 나타나는 경우, 웹 페이지 빌더에서 다른 서식이 플레이어 iframe에 적용되고 있는지 확인하세요.
이해하기 어려운 점은 문의해 주시면 도와드리겠습니다. 내 웹페이지 URL과 액세스에 필요한 로그인 정보를 꼭 기재해 주세요.