WordPress 비디오 블록을 사용하는 방법

게시 됨: 2021-09-08

WordPress 비디오 블록을 사용하면 페이지와 게시물에 비디오를 쉽게 업로드하고 추가할 수 있습니다. 크기와 기능을 제어할 수 있는 다양한 옵션을 제공합니다. 이 블록으로 비디오를 추가하면 콘텐츠가 더 전문적이고 바람직해 보입니다. 다행히 Video Block은 사용하기 쉽습니다.

이 기사에서는 비디오 블록을 살펴보겠습니다. 또한 설정 및 옵션, 사용 방법에 대한 몇 가지 팁 및 모범 사례, 자주 묻는 질문(FAQ)을 볼 것입니다.

게시물 또는 페이지에 비디오 블록을 추가하는 방법

게시물 또는 페이지에 비디오 블록을 추가하는 방법

콘텐츠에 비디오 블록을 추가하려면 먼저 블록을 표시할 위치에 커서를 놓고 삽입 도구를 선택합니다. 그런 다음 블록을 검색하거나 스크롤하여 옵션을 볼 수 있는 검색 상자가 열립니다. 비디오를 검색하고 결과에 표시되면 선택하십시오.

게시물 또는 페이지에 비디오 블록을 추가하는 방법

원하는 경우 블록을 배치할 위치에 /video를 입력하고 Enter 키를 누르거나 옵션에서 선택할 수 있습니다.

게시물 또는 페이지에 비디오 블록을 추가하는 방법

비디오 블록은 콘텐츠 영역 내에 배치됩니다. 미디어 삽입은 이미지 블록과 동일하게 작동합니다. 비디오를 업로드하거나 라이브러리에서 비디오를 선택하거나 표시하려는 비디오의 URL을 삽입하십시오. URL이 YouTube와 같은 소스에서 온 경우 블록은 해당 유형의 블록으로 변환됩니다. 비디오를 업로드할 때까지 옵션은 최소화됩니다.

게시물 또는 페이지에 비디오 블록을 추가하는 방법

비디오 플레이어에는 재생/일시 정지 버튼, 진행률 표시줄, 오디오, 전체 화면, 다운로드 및 PIP(Picture-in-Picture) 버튼을 포함한 모든 기본 재생 옵션이 포함되어 있습니다. PIP(Picture-in-Picture)는 사용자가 웹사이트를 스크롤하는 동안 재생할 수 있도록 비디오를 오른쪽 하단 모서리에 배치합니다. 비디오 아래에 캡션을 넣을 수 있습니다.

비디오 차단 설정 및 옵션

비디오 차단 설정 및 옵션

옵션 및 설정에는 도구 모음과 사이드바가 포함됩니다. 동영상을 업로드할 때까지 이러한 설정이 모두 표시되지 않습니다.

비디오 블록 도구 모음

비디오 블록 도구 모음

비디오 블록 내의 아무 곳이나 클릭하면 도구가 표시됩니다. 일부 도구는 이 블록 아래에 블록 영역을 추가할 때까지 표시되지 않을 수 있습니다. 각 설정을 자세히 살펴보겠습니다.

비디오 변경 블록 또는 스타일

비디오 변경 블록 또는 스타일

비디오 재생 아이콘을 선택하면 블록을 다른 유형의 블록으로 변환할 수 있는 드롭다운 상자가 열립니다. 이 예는 Cover를 보여줍니다.

그룹 – 단일 블록으로 조정할 수 있도록 블록을 그룹에 추가합니다.

안에 블록을 배치합니다.

미디어 및 텍스트 – 미디어 옆에 텍스트를 추가하여 두 개의 열을 만듭니다.

표지 – 비디오 위에 캡션을 배치합니다. 단락 블록의 캡션을 다른 유형의 텍스트 블록이나 버튼으로 변경할 수 있습니다.

파일 – 비디오를 캡션이 있는 버튼으로 변경하여 사용자가 웹사이트에서 비디오를 재생하는 대신 다운로드할 수 있도록 합니다.

비디오 블록 드래그 도구

비디오 블록 드래그 도구

드래그 도구를 마우스로 잡고 콘텐츠 내에서 원하는 위치로 이동합니다. 블록을 드래그할 때 블록이 드롭될 위치를 나타내는 파란색 선이 나타납니다.

비디오 블록 드래그 도구

그러면 비디오 블록이 새 위치에 배치됩니다.

비디오 블록 이동

비디오 블록 이동

위쪽 및 아래쪽 화살표를 사용하여 비디오 블록을 한 콘텐츠 섹션만큼 이동합니다.

비디오 블록 변경 정렬

비디오 블록 변경 정렬

정렬 옵션에는 왼쪽, 가운데, 오른쪽, 와이드 및 전체 너비가 있습니다. 오른쪽 및 왼쪽 정렬은 비디오 주위의 다음 블록에서 텍스트를 줄 바꿈합니다. 이 예를 오른쪽으로 정렬하도록 설정했습니다.

비디오 블록 변경 정렬

이것은 넓은 너비입니다. 화면의 대부분을 차지합니다.

비디오 블록 텍스트 트랙

비디오 블록 텍스트 트랙

텍스트 트랙은 비디오가 재생될 때 자막과 캡션을 표시합니다. WebVTT(Web Video Text Tracks) .vtt 파일 형식입니다. 파일은 미디어 라이브러리에서 로드됩니다.

비디오 블록 텍스트 트랙

.vtt 파일을 업로드하면 트랙을 편집할 수 있는 옵션이 표시됩니다. 레이블을 추가하고 언어를 선택한 다음 트랙의 종류를 선택합니다.

레이블은 사용자가 사용 가능한 트랙을 볼 때 보게 될 텍스트 트랙의 제목입니다.

소스 언어는 텍스트 트랙의 언어입니다.

종류는 표시할 트랙 유형을 나타냅니다. 옵션에는 다음이 포함됩니다.

  • 자막 – 대화의 번역.
  • 캡션 - 대화, 음향 효과, 음악 등의 필사본
  • 설명 – 무슨 일이 일어나고 있는지 설명하는 텍스트입니다.
  • – 탐색을 위한 장 제목입니다.
  • 메타데이터 – JavaScript에서 사용할 데이터입니다.

비디오 블록 텍스트 트랙

그런 다음 사용자가 선택할 수 있는 플레이어 옵션에 캡션이 추가됩니다.

비디오 블록 교체

비디오 블록 교체

이렇게 하면 비디오를 다른 비디오로 바꿀 수 있습니다.

비디오 차단 옵션

비디오 차단 옵션

옵션에는 추가 설정 숨기기, 복사, 복제, 이전 또는 이후에 삽입, 이동, HTML로 편집, 재사용 가능한 블록에 추가, 그룹화 및 블록 제거가 포함됩니다.

옵션의 기능은 다음과 같습니다.

추가 설정 숨기기 – 오른쪽 사이드바를 숨겨 방해 요소를 제거하고 작업 공간을 확장합니다.

복사 – 비디오 블록을 클립보드에 복사하여 콘텐츠 내 아무 곳에나 붙여넣을 수 있습니다.

복제 – 원본 아래에 블록의 복제본을 추가합니다.

앞에 삽입 – 이 블록 위에 블록 영역을 추가하여 다른 블록을 배치할 수 있습니다.

뒤에 삽입 – 이 블록 아래에 다른 블록을 배치할 수 있는 영역을 추가합니다.

Move To – 블록을 위 또는 아래로 이동할 수 있습니다. 화살표 키를 사용하여 블록을 원하는 위치에 파란색 선을 배치하고 Enter 키를 눌러 이동합니다.

HTML로 편집 – 이 블록의 HTML만 표시하고 다른 모든 블록은 그대로 둡니다.

재사용 가능한 블록 에 추가 – 다른 페이지나 게시물에서 재사용할 수 있도록 재사용 가능한 블록에 블록을 추가합니다.

그룹 – 모든 블록을 단일 단위로 조정할 수 있도록 블록을 그룹에 추가합니다.

블록 제거 – 블록을 삭제합니다.

비디오 블록 캡션 옵션

비디오 블록 캡션 옵션

캡션에는 일련의 옵션도 있습니다. 캡션 영역 내의 아무 곳이나 클릭하면 굵게, 기울임꼴 및 링크 옵션이 있는 작은 도구 모음이 열립니다. 서식 옵션도 포함되어 있습니다. 옵션에는 다음이 포함됩니다.

  • 인라인 코드
  • 인라인 이미지
  • 키보드 입력
  • 취소선
  • 첨자
  • 위에 쓴
  • 텍스트 색상

각각은 강조 표시한 텍스트에 영향을 줍니다.

비디오 차단 설정

비디오 차단 설정

비디오 블록에 대한 설정에는 비디오 및 고급이 포함됩니다. 둘 다 살펴보겠습니다.

비디오 설정

비디오 차단 설정

비디오 설정을 통해 플레이어의 작동 방식을 제어할 수 있습니다. 옵션에는 다음이 포함됩니다.

자동 재생 – 페이지가 로드될 때 비디오를 자동으로 재생합니다.

루프 – 비디오를 연속 루프로 재생합니다.

음소거 - 오디오를 음소거합니다.

재생 컨트롤 – 플레이어 컨트롤을 숨기거나 표시합니다. 컨트롤이 숨겨지면 사용자는 비디오를 제어할 수 없습니다. 자동 재생을 활성화해야 합니다.

인라인 재생 – 요소의 재생 영역 내에서 비디오를 재생합니다.

미리 로드 – 페이지가 로드될 때 다운로드되는 비디오의 양을 설정합니다. 자동(전체 비디오), 메타데이터(기본 정보만) 또는 없음(아무것도 자동으로 다운로드되지 않음)을 선택합니다.

포스터 이미지 – 비디오의 첫 번째 프레임에 있는 스크린샷을 추천 이미지로 바꿀 수 있습니다. 비활성화하지 않는 한 플레이어 컨트롤은 계속 표시됩니다. 위의 예에서 새 이미지를 추가했습니다.

고급의

고급의

고급 비디오 설정에는 HTML 앵커 및 추가 CSS 클래스가 포함됩니다.

HTML 앵커 – 이 특정 블록에 대한 사용자 정의 URL로 사용할 텍스트를 지정할 수 있습니다.

추가 CSS 클래스 – 이 블록에 사용할 CSS 클래스를 추가하는 필드를 제공합니다.

비디오 블록을 효과적으로 사용하기 위한 팁 및 모범 사례

YouTube 또는 Vimeo와 같은 소스에서 비디오를 포함하는 경우 비디오 블록 대신 해당 블록을 사용하십시오.

비디오를 압축하고 크기와 로드 시간을 줄이십시오.

온라인 캡션 생성기 또는 유사한 앱을 사용하여 .vtt 트랙을 만듭니다.

페이지 속도를 높이려면 미리 로드를 없음으로 설정하십시오. 자동으로 다운로드되는 양은 페이지 로딩 속도에 영향을 미칩니다.

오른쪽 및 왼쪽 너비 옵션을 사용하여 시각적으로 흥미롭게 보이도록 비디오 주위에 텍스트를 배치합니다. 와이드 및 전체 너비 옵션을 사용하여 비디오를 강조합니다.

동영상 이미지에 첫 번째 프레임을 사용하는 대신 클릭하고 싶은 추천 이미지를 만드세요.

비디오 블록에 대해 자주 묻는 질문

이 블록의 목적은 무엇입니까?

이 블록을 사용하면 웹사이트에서 비디오를 쉽게 호스팅할 수 있고 플레이어가 작동하는 방식을 제어할 수 있습니다.

비디오 블록과 비디오 임베딩의 차이점은 무엇입니까?

YouTube 및 Vimeo와 같은 소스의 포함된 비디오는 플레이어의 기능을 제어할 수 없습니다.

이 블록을 사용하는 가장 좋은 방법은 무엇입니까?

제품 데모 및 짧은 자습서 클립에 대한 반복 재생 및 플레이어 컨트롤을 제거하는 자동 재생을 사용합니다. 더 긴 비디오의 경우 자동 재생을 비활성화하고 컨트롤을 활성화된 상태로 유지합니다.

결론

이것이 WordPress 비디오 블록에 대한 우리의 모습입니다. 나는 그것이 제공하는 통제 수준을 좋아합니다. 왼쪽 및 오른쪽 정렬은 특히 주변 콘텐츠와 잘 어울리고 넓은 너비는 비디오에 주의를 끌기에 좋은 방법입니다. 포스터 이미지를 추가하면 사용자의 관심을 끌 수 있습니다. 이 블록은 제품 데모, 튜토리얼, 음악 등을 위한 훌륭한 선택입니다.

우리는 당신의 의견을 듣고 싶습니다. 비디오 블록을 사용합니까? 의견에 귀하의 경험에 대해 알려주십시오.

PD99/Shutterstock.com을 통한 추천 이미지