WordPress 웹 사이트에 비디오 배경을 추가하는 방법

비디오 배경은 웹사이트의 가장 멋진 기능 중 하나입니다. 웹사이트를 생생하고 흥미롭게 만들 뿐만 아니라 더 많은 이미지와 정보를 표시할 수 있습니다. 그러나 웹 사이트에 비디오 배경을 추가하는 방법을 아는 사람은 많지 않을 것입니다. 따라서 이 궁극적인 가이드는 웹사이트에 비디오 배경을 추가하려는 경우에 도움이 될 것입니다.

비디오 배경을 지원하는 WordPress 테마 사용

일부 WordPress 테마는 비디오 배경 표시를 지원하므로 표시하려면 테마를 설정하기만 하면 됩니다.

예를 들어, 이 Clean Blocks 테마는 헤더 커버 영역에서 비디오 배경을 지원합니다. 그런 다음 사용자 지정 프로그램으로 이동하여 헤더 미디어 섹션을 찾은 다음 테마 요구 사항에 따라 비디오를 삽입하는 몇 가지 간단한 단계만 거치면 됩니다.

대부분의 테마에서는 동영상을 업로드할 수 있습니다. 게다가, 내가 위에서 했던 것처럼 많은 사람들이 YouTube에서 포함된 링크를 지원할 것입니다. 이것은 더 빠르고 간단할 뿐만 아니라 웹사이트를 더 가볍게 만들어 웹사이트의 속도를 최적화합니다. 각 테마는 다른 방식으로 사용자 지정되므로 지침을 주의 깊게 읽어야 합니다.

단, 테마가 특정 영역에서만 실행되는 동영상만 지원하는 경우가 있어 테마 사용 시 동영상 배경 영역이 제한될 수 있습니다. 다른 영역에 비디오 배경을 추가하고 싶다면? 이제 플러그인을 사용하여 WordPress 웹사이트에 비디오 배경을 추가할 차례입니다.

플러그인을 사용하여 웹사이트에 비디오 배경 추가

이를 도와줄 수 있는 많은 플러그인이 있습니다. 조사한 결과 AWP(Advanced WordPress Background) 플러그인은 기술에 대해 잘 모르는 사람들이 사용하기 매우 쉽다는 것을 알았습니다. 또한 비디오 배경이 아름답게 표시되도록 돕고 많은 사용자 정의 옵션을 제공합니다.

이 플러그인은 WordPress 5.0 버전 및 Gutenberg 편집기에서만 작동합니다. 따라서 WordPress 버전을 업데이트하고 이 편집기를 사용하는 것을 잊지 마십시오.

1단계: 플러그인 설치

wordpress.org에서 이 플러그인을 다운로드한 다음 대시보드 > 플러그인 > 새로 추가 > 플러그인 업로드 로 이동하여 플러그인 을 업로드, 설치 및 활성화할 수 있습니다.

또는 대시보드 > 플러그인 > 새로 추가 에서 플러그인을 찾아 설치 > 활성화를 클릭 합니다 .

2단계: 비디오 배경 추가

비디오 배경을 추가하는 것은 구텐베르크에서 블록을 삽입하는 것과 유사합니다. 따라서 Gutenberg에 대해 잘 알고 있으면 쉽습니다. 그렇지 않은 경우 Gutenberg 사용 지침을 읽을 수 있습니다.

동영상 배경을 추가하려는 페이지나 기사로 이동하여 새 블록을 추가하고 "awb" 키워드를 검색하여 AWB의 배경 블록을 찾습니다.

이 블록을 삽입한 후 오른쪽 사이드바에서 블록 탭을 선택하여 설정합니다. 배경은 이미지, 컬러, 비디오의 3가지 옵션이 있습니다. 비디오 배경을 삽입하려면 비디오 를 선택하십시오. 그런 다음 YouTube 또는 Vimeo URL에서 비디오를 삽입하거나 자체 호스팅 비디오를 업로드하는 두 가지 옵션이 있습니다.

첫 번째 옵션을 선택한 경우 비디오 URL 섹션에 링크를 삽입하기만 하면 됩니다.

두 번째 옵션의 경우 자체 호스팅 섹션으로 이동합니다. 업로드할 동영상 형식에는 3가지가 있습니다.

원하는 형식을 선택한 다음 라이브러리에 있는 기존 비디오를 선택하거나 새 비디오를 업로드하십시오. 그게 다야

3단계: 비디오 배경 사용자 지정

전체 높이로 비디오 표시 및 비디오에 블록 추가

동영상을 삽입하면 이렇게 프레임이 작아집니다. 전체 높이로 비디오를 표시하려면 블록의 도구 모음에서 전체 높이 섹션을 선택합니다.

아래는 텍스트와 함께 전체 높이로 표시되는 비디오 배경입니다. 일반적으로 사이드바의 차단 탭에서 텍스트의 크기, 색상, 위치 등을 사용자 지정할 수 있습니다. 이 비디오를 헤더 커버나 클릭 유도문안 섹션에 넣고 싶을 때 유용합니다.

텍스트를 블록으로 바꿀 수도 있습니다. 이것은 구텐베르크 블록을 삽입하는 것과 유사합니다.

비디오 설정

비디오 탭에서 비디오 배경을 편리하게 표시하려면 몇 가지 주요 섹션을 아래와 같이 설정해야 합니다.

(1): 모바일 장치에서 배경 비디오를 활성화하거나 비활성화할 수 있습니다.
(2) 및 (3): 특히 원본 비디오가 너무 긴 경우 원하는 부분을 표시하려면 여기에 비디오의 시작 및 종료 시간을 입력하십시오.
(4): 동영상이 끝나면 반복할 수 있습니다. 비디오 자동 재생을 유지하려면 이 기능을 활성화해야 한다고 생각합니다.

포스터 이미지 설정

아래로 스크롤하면 포스터 이미지 섹션이 표시됩니다. 여기에서 선택한 사진은 비디오가 표시되기 1초 후에 표시됩니다. 아래 옵션을 사용하면 이미지의 적절한 크기와 스타일을 사용자 지정할 수 있습니다.

다음은 포스터 이미지를 추가한 결과입니다.

오버레이 설치

(1)은 비디오 배경의 오버레이 색상이고 (2)는 오버레이의 투명도입니다. 예를 들어 주황색은 내 사이트의 주요 톤이므로 웹 디자인과 일치시키기 위해 이 색상을 비디오 오버레이로 선택했습니다.

Color Palette 는 비디오의 대안입니다. 즉, 실제로 비디오 배경에서 컬러 배경으로 전환합니다. 이 색상 배경을 제거하려면 지우기 버튼을 선택하십시오.

시차 및 마우스 시차 효과 설치

시차 탭에서 이러한 효과를 켜거나 끌 수 있으며 다양한 유형의 시차를 쉽게 선택할 수 있습니다. 이것은 매우 훌륭하고 흥미로운 효과이므로 사용하고 사이트에 적합한 스타일을 선택해야 합니다.

시차 효과는 익숙할 수 있지만 마우스 시차 효과는 익숙하지 않을 수 있습니다. 동영상 위로 마우스를 이동하면 쉽게 알 수 있으며 동영상 내 장면도 함께 이동합니다.

마우스 시차 > 활성화 섹션으로 이동하여 이 효과를 사용할 수 있습니다. 그런 다음 크기 및 속도를 조정할 수 있습니다. 속도가 낮을수록 동영상이 빠르게 움직입니다. 크기가 작을수록 동영상이 더 많이 움직이므로 마우스를 움직일 때 동영상이 "움직이는" 느낌이 들게 합니다.

다음은 가장 낮은 속도와 크기를 선택한 경우의 예입니다.

간격 설정

간격 탭에서 비디오에서 페이지 여백까지의 거리를 사용자 지정하고 여백 및 패딩 섹션에 거리 매개변수를 입력합니다. 예를 들어, 비디오의 4면 모두에 대해 10의 패딩과 20의 여백을 입력했습니다.

고급 설정

고급 섹션의 추가 CSS 에서 비디오 배경에 대한 사용자 정의 코드를 추가할 수 있습니다. 그리고 HTML 앵커 섹션을 사용하면 비디오의 제목에 대한 키워드 링크를 사용할 수 있습니다. 숏코드에 대해 잘 모르신다면 이 부분은 건너뛰셔도 됩니다.

그리고 이것이 최종 결과입니다. 영상이 꽤 괜찮아보이죠?

마지막 말

이 매우 상세한 기사를 통해 WordPress 웹 사이트에 비디오 배경을 추가하여 방문자를 유치할 수 있기를 바랍니다. AWB 플러그인에 대해서는 eStar와 같이 Gutenberg를 강력하게 지원하는 테마와 함께 사용해야 합니다. 여기서는 eStar 테마와 AWB 플러그인을 사용하여 헤더 커버에 매력적인 비디오 배경을 만들었습니다.

이 완벽한 조합은 비디오를 더 매력적으로 보이게 할 수 있습니다. WordPress에 대한 더 많은 팁을 알고 싶다면 주저하지 말고 이 기사 아래에 댓글을 달고 생각을 공유하십시오.