문제 해결: 임베드된 동영상 위와 아래의 공백 제거하기

반응형(기본값) 임베드 코드를 사용해 동영상을 임베드할 때 동영상 플레이어 위와 아래에 공백이 나타나는 문제가 발생할 수 있습니다. 

이 공백은 임베드 코드 앞부분의 패딩 %로 인해 발생합니다. 이 공백을 제거할 수 있는 몇 가지 방법이 있습니다. 

• 사용자 지정 크기: 동영상 설정 페이지의 공유 버튼 > 임베드 > 사용자 지정 > 커스텀 크기 설정 토글에서 프라이버시 옵션을 선택합니다.
  토글 아래의 텍스트 상자를 사용하여 플레이어의 측면을 편집할 수 있습니다.
  
• 패딩 편집: 임베드 코드에서 패딩 백분율을 수동으로 편집할 수 있습니다. 상위 컨테이너의 높이와 너비를 아는 경우 패딩 값을 Parent Height/ParentWidth %로 입력합니다.
  예: 상위 컨테이너가 5,000 x 10,000 픽셀이면 패딩은 50%입니다.
  

  아래는 50% 패딩이 적용된 샘플 임베드 코드입니다. 

  <div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/000?h=000&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; gyroscope; accelerometer" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Tour of Ibiza"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

   

• 패딩 제거: 원하는 경우 코드 시작 부분에서 "padding:50% 0 0 0;position:relative;"를 삭제하여 기본 임베드 코드에서 패딩을 완전히 제거할 수 있습니다.
  
  아래는 패딩이 없는 샘플 소스 코드입니다.

  <div style= ><iframe src="https://player.vimeo.com/video/000?h=000&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; gyroscope; accelerometer" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Tour of Ibiza"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

임베드된 동영상에 문제가 계속 발생하면 지원팀에 문의하세요.