WordPress에 비디오를 포함하는 방법

이 기사에서는 WordPress에 비디오를 삽입하는 방법에 대해 설명합니다. 각각 장단점이 있는 몇 가지 방법이 있으며 이 기사에서 그 모든 것을 살펴볼 것입니다.

WordPress에 비디오를 포함하려는 몇 가지 이유가 있습니다. 비디오는 유지율을 높이고 때로는 상황을 설명하는 가장 좋은 방법이 될 수 있으며 SEO로 이어질 수도 있습니다.

기존의 .MOV 및 .MP4는 물론 .WebP 비디오와 같은 새롭고 현대적인 형식의 여러 비디오 형식이 있습니다. WordPress 웹사이트에 비디오를 추가/포함할 수 있는 두 가지 주요 방법을 빠르게 살펴보겠습니다. 그런 다음 각 주제와 해당 방법을 사용하여 동영상을 삽입하는 방법과 장단점에 대해 자세히 알아보겠습니다.

• 타사 비디오 삽입(YouTube 또는 Vimeo)
• 자체 호스팅 비디오 임베드(동일한 서버)

타사 비디오 임베드

이것은 아마도 WordPress 웹사이트에 비디오를 삽입하는 가장 일반적인 방법일 것입니다. 아주 간단하고 쉽습니다. 먼저 비디오를 타사 플랫폼에 업로드하려고 합니다. WordPress의 가장 일반적인 두 플랫폼은 YouTube와 Vimeo이며, 각각 WordPress 웹사이트에 쉽게 삽입할 수 있습니다.

비디오를 타사 플랫폼에 업로드한 후에는 두 가지 주요 방법을 사용하여 이를 WordPress 웹사이트에 포함할 수 있습니다. 첫 번째 방법은 단순히 링크를 복사하여 구텐베르크 편집기에 붙여넣는 것입니다. 주요 비디오 편집기 중 하나를 사용하는 경우 Gutenberg는 이를 인식하고 자동으로 비디오 플레이어를 생성합니다.

자동 식별 기능이 작동하지 않는 경우 Gutenberg 내에서 YouTube/Vimeo 내장 블록을 검색할 수도 있습니다. 특정 타사 비디오 호스팅 업체에 대한 내장 블록을 찾아 링크를 입력 필드에 붙여넣기만 하면 됩니다.

타사 비디오를 WordPress 웹사이트에 삽입하는 또 다른 방법은 iframe을 사용하는 것입니다.

모든 타사 제공업체는 내장 코드를 생성하는 방법이 있지만 이 예에서는 YouTube를 사용합니다. 비디오에서 마우스 오른쪽 버튼을 클릭한 다음 임베드 코드 복사를 선택합니다. 이렇게 하면 YouTube 비디오용 iframe 코드가 자동으로 생성되어 구텐베르그 편집기(또는 WordPress 웹사이트의 모든 위치)에 쉽게 붙여넣을 수 있습니다. 이 iframe 코드는 특별한 Gutenberg 블록 없이도 WordPress 웹사이트에 비디오를 포함합니다.

WordPress의 비디오에 대한 일반적인 iframe 임베드 코드는 다음과 같습니다.

 < iframe width = "1263" height = "480" src = "https://www.youtube.com/embed/2JlhvL5OTrE" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > </ iframe >
 코드 언어: HTML, XML ( xml )

자신만의 iframe 코드를 만들 수도 있습니다. 기본 비디오 파일의 소스 URL만 알면 됩니다.

iframe 코드가 있으면 여러 가지 방법으로 WordPress 웹사이트에 추가할 수 있습니다. 가장 쉬운 방법은 Gutenberg 편집기를 사용하여 HTML 블록을 추가하고 해당 HTML 블록에 iframe 코드를 붙여넣는 것입니다. 테마 빌더를 사용하는 경우 일반적으로 HTML 블록이 있습니다.

보시다시피 Gutenberg 블록 편집기 또는 수동 방법을 사용하여 YouTube 비디오 또는 추가 타사 비디오를 WordPress 웹 사이트에 포함하는 것은 매우 쉽습니다.

이제 자체 서버에서 호스팅되는 WordPress 웹 사이트에 비디오를 포함하는 방법을 살펴보겠습니다.

자신의 WordPress 웹 사이트에서 비디오 호스팅

자신의 웹사이트에서 비디오를 호스팅하도록 선택할 수도 있습니다. 그러나 대부분의 사용 사례에서 타사 비디오 방법을 사용하는 것이 좋습니다. 자체 서버에서 비디오를 호스팅하는 것은 많은 저장 공간을 차지하고 많은 대역폭을 사용하기 때문입니다. 이것은 관련된 모든 사람에게 좋지 않으며 제3자 서비스가 이를 위해 특별히 설계되었습니다.

그러나 타사 서비스와 달리 자체 서버에서 비디오를 호스팅하는 것이 더 나은 사용 사례가 있습니다. 비디오가 매우 작을 때입니다. 단 몇 초입니다. 일반적으로 이 비디오는 튜토리얼의 특정 단계를 수행하는 방법을 보여줍니다.

이 스타일의 비디오는 웹사이트에서 공간을 훨씬 덜 차지한다는 점을 제외하고는 GIF와 동일한 역할을 수행합니다. 우리는 항상 gif를 비디오로 변환하고 이 방법을 사용하여 WordPress 웹사이트에 포함할 것을 권장합니다. 그러나 20초에서 30초를 초과하는 비디오에는 이 작업을 수행하지 마십시오. 이 경우 타사 서비스를 사용하여 이를 수행해야 합니다.

짧은 비디오를 녹화한 후에는 가능한 한 작은 파일 크기로 압축하는 것이 좋습니다. 이렇게 하면 프런트 엔드에서 더 빠르게 로드되고 서버에서 훨씬 적은 공간을 차지합니다.

그런 다음 Gutenberg 편집기를 사용하여 비디오 블록을 추가합니다.

비디오 블록을 추가한 후에는 업로드하거나 미디어 라이브러리에서 선택하거나 URL에서 비디오를 삽입할 수 있습니다. 우리는 비디오를 자체 호스팅하기 때문에 자체 서버에 업로드할 것입니다. 비디오를 업로드하면 Gutenberg의 나머지 콘텐츠와 함께 자동으로 표시됩니다.

보시다시피 이 영상은 15초입니다. 자체 호스팅 비디오 방식으로 20~30초를 넘기지 않는 것이 좋습니다. 비디오는 이미 WordPress 웹 사이트에 포함되어 있으며 원하는 경우 이 단계에서 그대로 둘 수 있습니다. 그러나 사용자 경험을 향상시키기 위해 WordPress 웹 사이트에서 설정할 몇 가지 다른 설정이 있습니다.

우리는 이 비디오가 GIF처럼 작동하기를 원합니다. GIF의 세 가지 정의 특성은 자동으로 재생되고, 짧고, 계속 반복된다는 것입니다. GIF 또한 비디오 컨트롤이나 오디오가 없습니다.

이를 위해 WordPress에 비디오 임베드를 쉽게 설정할 수 있습니다. Gutenberg 편집기의 오른쪽 패널에서 변경할 수 있는 비디오 임베드와 관련된 몇 가지 설정이 있음을 알 수 있습니다.

비디오 설정에서 자동 재생을 켜고, 비디오를 반복하고, 음소거로 재생하고, 재생 컨트롤을 제거하고, 라인에서 재생하려고 했습니다. 이 모든 컨트롤을 조합하면 WordPress에 포함된 비디오가 GIF처럼 작동합니다.

필요한 경우 사전 로드 설정을 변경하고 포스터 이미지(YouTube의 썸네일 이미지와 동일)를 설정할 수도 있습니다.

결론

이 기사에서는 WordPress 웹 사이트에 비디오를 포함할 수 있는 두 가지 주요 방법을 제시했습니다. 둘 다 WordPress의 핵심 기능이자 모든 사람의 삶을 훨씬 쉽게 만들어주는 Gutenberg 블록 빌더를 활용했습니다. 이 두 가지 범주에 속하지 않는 비디오 콘텐츠를 WordPress 웹사이트에 포함하는 다른 방법이 있는 경우 아래 댓글 섹션에서 알고 싶습니다.