드롭박스에 업로드한 영상을 다른 곳에 임베드하는 방법

워드프레스WordPress 웹사이트를 직접 운영하는 경우 호스팅 중인 서버의 용량과 트래픽 등의 압박을 받게 되는데요. 최근에는 유튜브YouTube의 영향으로 글보다는 영상이 좀 더 편하다고 느끼는 사용자들이 많기 때문에 본 사이트에서도 글과 이미지로 설명하기 보다는 비디오 형태를 좀 더 추가하려는 편입니다.

필자의 경우 사이트에 영상이 필요한 경우 짤(Webp, Gif) 형태로 변환하거나, 유튜브에 업로드해서 임베드하는 방식으로 사용하는데 전자는 영상에 음성이 포함된 경우 사용할 수 없고 유튜브는 영상 하단에 추천 영상 또는 광고가 떠있어 깔끔하지 못한 느낌을 줄 수 있어 사용을 꺼리게 되는데요.

이 경우 드롭박스Dropbox를 사용하고 있다면 영상을 드롭박스에 업로드한 뒤 공유링크를 생성하고 이 링크를 수정하면 손쉽게 원하는 곳에 깔끔하게 임베드할 수 있습니다.

아래 설명은 테스트 및 검증 후 작성 된 내용이지만 이것이 본문의 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 확인바랍니다.

튜토리얼 환경: 윈도우 11, 엣지, 드롭박스, 워드프레스 6.1.1v (구텐베르크 에디터)

드롭박스 공유 링크 수정

영상이 아닌 드롭박스 로고 출력
영상이 아닌 드롭박스 로고 출력

드롭박스는 공유시 링크 형태로만 제공하는데 이 링크를 iframe 태그로 수정해도 자체적으로 할당된 옵션으로 인해 정상적으로 영상이 출력되지 않고 드롭박스 로고만 표시되기 때문에 드롭박스에서 공유 링크를 임베드해서 사용하기 위해서는 생성된 링크를 조금 수정하는 과정이 필요합니다.

공유 링크 생성
공유 링크 생성
  1. 우선 공유할 영상 파일을 마우스 오른쪽 버튼으로 클릭해 열리는 컨텍스트 메뉴에서 Dropbox > 공유를 클릭합니다.
공유 링크 복사
공유 링크 복사
  1. 생성된 링크를 복사하면 되는데 여기서 중요한 부분이 일반적으로 위 과정을 통해 드롭박스에서 공유링크를 생성하면 https://www.dropbox.com/s/wjikklws7l60hds/파일이름.확장자?dl=0 형식으로 되어있는데 이 링크 마지막에 위치한 dl=0raw=1으로 수정해 https://www.dropbox.com/s/wjikklws7l60hds/파일이름.확장자?raw=1 과 같이 만들면 해당 링크에 권한이 부여되어 원하는 곳에 임베드할 수 있습니다.

드롭박스 영상 워드프레스 추가

위 과정으로 드롭박스 공유 링크를 수정했다면 워드프레스에서 비디오 메뉴를 통해 드롭박스에 업로드된 영상을 간단하게 삽입할 수 있습니다.

주의: 드롭박스 약관 에서는 드롭박스를 개인의 클라우드 서비스 인프라스트럭처로 사용하거나 그 백업을 위해 사용하는 행위를 금지하고 있으니 아래 내용은 단순하게 참고 용으로 활용합니다.
워드프레스 비디오 블럭 추가
워드프레스 비디오 블럭 추가
  1. 워드프레스에서 에디터로 이동 후 비디오 블럭을 추가합니다.
URL에서 삽입 선택
URL에서 삽입 선택
  1. 비디오 블럭이 생성되면 세 가지 옵션을 선택할 수 있는데 여기서 URL에서 삽입을 클릭합니다.
임베드 가능 링크 삽입
임베드 가능 링크 삽입
  1. 앞서 생성 후 수정된 공유 링크를 이곳에 삽입 후 적용 아이콘 확인을 클릭합니다.
영상 삽입 완료
영상 삽입 완료
  1. 정상적으로 영상이 삽입된 것을 확인할 수 있습니다.
브라우저 렌더링 시 정상적으로 재생 가능
브라우저 렌더링 시 정상적으로 재생 가능
  1. 브라우저에서 실제로 렌더링 된 이미지인데 정상적으로 영상이 재생 가능하며 광고 없이 깔끔하게 삽입되었습니다.
참고: 테마에 따라 미디어 항목에서 비디오(Video) 블록을 지원하지 않을 수 있으며 이 경우 위 방식이 적용되지 않으며, 임베드 블럭으로는 위 방식이 적용되지 않습니다.

마치며

이번 포스트에서는 드롭박스에 업로드한 영상을 워드프레스에 임베드하는 방법에 대해 알아보았습니다. 필자는 드롭박스와 함께 원드라이브를 메인 클라우드로 사용 중이고 마이크로소프트 365를 패밀리로 구독 해 혼자서 사용하고 있어 드롭박스 대비 상대적으로 용량이 널널한데요. 이렇게 원드라이브를 사용하고 있다면 원드라이브에 업로드한 영상 또한 임베드 코드로 생성할 수 있습니다.

이처럼 워드프레스에서 영상 콘텐츠를 추가해서 사용하는 경우 짤 과 유튜브 링크가 마음에 들지 않는다면 위 과정으로 드롭박스에 영상을 올리고 해당 파일의 공유 링크를 수정해서 사용해 보시길 바랍니다.

관련 글

본 글의 저작권은 comeinsidebox.com에 있습니다. comeinsidebox.com의 사전 서면 동의 없이 본 글의 전부 또는 일부를 무단으로 전재, 게시, 배포하는 것을 금지합니다.
댓글로 남기기 어려운 내용은 Contact Form 링크를 이용해 개별적으로 문의 할 수 있습니다. 해당 포스트와 연관 된 문의 시 Copy를 눌러  URL 을 복사 후 등록 해야 합니다.

Leave a Comment