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