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

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

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

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

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

튜토리얼 환경: 윈도우 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 과 같이 만들면 해당 링크에 권한이 부여되어 원하는 곳에 임베드할 수 있습니다.
nginx service Failed to parse PID from file 오류 해결 방법

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

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

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

마치며

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

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

워드프레스 댓글 정렬 순서 최신순으로 변경하기

관련 글

댓글로 남기기 어려운 내용은 Contact Form 에서 개별적으로 문의 할 수 있습니다. 해당 글과 연관 된 내용은 Copy를 이용해 현재 페이지의 주소를 복사 후 문의 폼에 입력시 보다 정확한 답을 얻을 수 있습니다.

Leave a Comment