워드프레스 Elementor 페이지 빌더에 동영상을 삽입하는 방법
많은 워드프레스 유료 테마에서 자체 페이지 빌더나 비주얼 컴포저 같은 외부 페이지 빌더를 사용합니다. 예를 들어, 아바다 테마의 경우 자체 페이지 빌더인 Fusion Builder를 사용하고 Divi 테마에서는 Divi 빌더를 사용합니다. Jupiter 같은 테마는 Visual Composer를 채택하고 있습니다.
개인적으로는 비주얼 컴포저를 별로 좋아하지 않지만, 요즘 나오는 대부분의 Themeforest 테마에는 비주얼 컴포저가 번들로 제공되고 있습니다. 비주얼 컴포저가 사용되는 경우 테마 최적화가 제대로 이루어지지 않으면 사이트 속도가 느려질 수 있습니다.
페이지 빌더를 사용하면 코딩 지식이 거의 없더라도 쉽게 사이트를 만들 수 있는 장점이 있습니다. 무료 페이지 빌더를 원하는 경우 Elementor 페이지 빌더를 이용해볼 수 있습니다. Elementor는 무료이면서 괜찮은 기능과 속도를 보여줍니다.
다음은 Elementor에서 Youtube 등의 동영상을 추가하는 방법입니다. 방법은 페이지 빌더마다 조금씩 차이가 있지만 대동소이합니다.
Elementor 페이지 빌더에서 동영상 추가하기
Elementor를 페이지를 편집하는 화면에서 왼쪽의 Video 요소를 마우스로 끌어다가 원하는 곳에 놓습니다.
그러면 다음과 같이 Elementor에서 지정한 샘플 유튜브 동영상이 삽입되고 왼쪽에 세부적으로 조정할 수 있는 설정 화면이 표시됩니다.
Source(소스)에서 YouTube, Vimeo, Dailymotion, Self Hosted(자체 호스트 동영상) 중에서 동영상 유형을 선택할 수 있습니다.
URL에는 추가하려는 동영상의 URL을 입력합니다.
- 유튜브 동영상의 경우 https://www.youtube.com/watch?v=RtU_mdL2vBM 같은 형식으로 동영상을 추가할 수 있습니다.
- 비메오 동영상의 경우 https://vimeo.com/278489279 형식으로 추가하면 됩니다.
Start Time과 End Time에는 시작 시간과 종료 시간을 초 단위로 입력할 수 있습니다.
Video Options에서는 자동 재생, 플레이어 컨트롤, 비디오 정보 등의 세부 옵션을 지정할 수 있습니다.
참고로 자동 재생을 선택해도 보통 모바일 폰(특히 안드로이드 폰)에서는 자동 재생 기능이 작동하지 않습니다. 이것은 방문자의 스마트폰에서 동영상 자동 재생으로 인한 의도하지 않은 과도한 데이터 소진을 차단하기 위한 조치라고 합니다. 간혹 모바일 폰에서도 동영상이 자동 재생되도록 하는 방법을 문의하는 분들이 있습니다. 가능할지는 모르겠지만 별로 좋은 생각은 아닌 것 같습니다. (사이트 방문자로부터 욕을 엄청 들어 먹을 수 있습니다.)
옵션이 마음에 들면 왼쪽 맨 아래의 Update를 클릭하여 설정을 저장합니다.
유튜브 동영상 삽입 샘플:
비메오 동영상 삽입 샘플:
섹션에 유튜브 동영상 배경 삽입하기
유튜브 등의 동영상을 섹션에 배경으로 삽입하는 것도 가능합니다. 다음 글을 참고해보세요.
마치며
이상으로 Elementor 페이지 빌더에서 YouTube와 Vimeo 등의 동영상을 삽입하는 방법에 대해 살펴보았습니다. 자체적으로 호스트되는 동영상도 추가가 가능하지만, 트래픽 때문에 별로 권장되지 않습니다. 그리고 모바일 기기 재생에서 호환이 되지 않는 동영상 형식이 있을 수 있고, 트래픽 제한으로 동영상이 느려질 수 있습니다.
