Divi와 함께 비디오 사용에 대한 궁극적인 가이드

비디오는 강력한 도구입니다. 이미지가 천 단어의 가치가 있다면 1분의 비디오는 180만 단어의 가치가 있습니다(최소한 연구원 Dr. James McQuivey가 제안한 것입니다). 비디오는 효과적인 마케팅 도구이며 올바르게 수행되면 아름다운 디자인을 위한 도구입니다.

Divi를 사용하면 웹사이트에 비디오를 쉽게 추가할 수 있습니다. 비디오 및 비디오 슬라이더 모듈을 사용하면 비디오 URL을 입력하기만 하면 youtube 및 vimeo와 같은 타사 호스팅 비디오를 추가할 수 있습니다. 최대 브라우저 호환성을 위해 mp4 및 webm 형식으로 사용자 지정 비디오를 추가할 수도 있습니다. 무엇보다도 Divi는 이미지 오버레이와 재생 버튼으로 비디오 스타일을 지정하는 옵션을 제공하여 사이트 디자인과 일치하도록 돕습니다.

페이지에 비디오를 포함하는 것 외에도 Divi는 배경 비디오를 추가하기 위한 간단한 솔루션도 제공합니다. 현재 Divi 빌더로 사이트를 구축하면 각 섹션, 행, 열 및 37개 모듈 중 20개 모듈에 배경 비디오 기능이 있습니다.

대부분의 사람들에게 Divi 내에서 비디오를 사용하는 것은 원하는 YouTube 또는 Vimeo 비디오에 대한 링크를 삽입하고 게시물이나 페이지에 나타나는 것을 보는 것만큼 쉽습니다. 그러나 이 게시물에서 우리는 Divi가 비디오를 사용하는 방법과 이유에 대해 이야기할 것이므로 실행하려는 특별한 사용 사례, 고유한 스타일 또는 창의적인 실험에 완벽하게 대비할 수 있습니다.

이 가이드에서 논의할 내용은…

• 비디오 모듈과 비디오 슬라이더 모듈의 비하인드 씬 작동 방식을 설명하여 더 효과적으로 사용할 수 있습니다.
• 비디오를 자체 호스팅하는 것과 타사 호스트를 사용하는 것의 차이점.
• 웹용으로 비디오를 최적화하는 방법에 대한 몇 가지 팁입니다.
• 비디오 배경에 대한 모범 사례.
• 비디오 크기 선택을 위한 일반 가이드입니다.
• 배경 비디오에 대한 몇 가지 유용한 해킹.

시작하자.

비디오 모듈 탐색

비디오 모듈을 사용하면 거의 모든 소스에서 페이지에 비디오를 포함할 수 있습니다. 비디오 모듈에 대한 Divi의 문서는 모든 기능과 페이지에 비디오를 추가하는 방법을 설명합니다. 하지만 이 포스트에서는 조금 더 깊이 파고들 것입니다.

비디오 모듈에 자체 호스팅 비디오 추가

비디오 모듈로 자체 호스팅 비디오를 추가하려면 비디오 설정에서 비디오를 업로드하거나 비디오 파일에 URL을 추가해야 합니다. 그리고 두 가지 파일 형식으로 동영상을 추가해야 합니다.

그리고 그것이 당신이 정말로 해야 할 전부입니다. 충분히 간단합니다.

그러나 장면 뒤에서 Divi는 HTML5 비디오 요소를 사용하여 비디오를 표시하고 있습니다. 자체 호스팅 비디오를 추가하거나 mp4 및 webm 형식을 사용하여 자체 비디오를 업로드하도록 선택하면 Divi가 배포하는 코드 구조는 다음과 같습니다.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

다음은 이 코드가 수행하는 작업에 대해 지적하고 싶은 몇 가지 사항입니다.

1. <video> 태그 내의 controls 속성에 주목하십시오. 이것은 비디오가 컨트롤을 표시하도록 지시합니다. 충분히 간단합니다.
2. 여는 <video> 태그와 닫는 <video> 태그 안에 있는 두 개의 <source> 태그에 주목하십시오. 소스는 비디오 파일로 구성됩니다. 첫 번째는 mp4이고 두 번째는 webm 파일 형식입니다. 최대 브라우저 지원을 위해서는 둘 다 필요합니다. 순서도 중요합니다. 가장 보편적으로 지원되는 mp4이기 때문에 브라우저에서 mp4를 먼저 보기를 원합니다. 나중에 이러한 형식에 대해 더 자세히 설명하겠습니다.
3. 처음 두 형식이 인식되지 않으면 "Error loading this resource"라는 줄이 표시됩니다.
4. 당신이 볼 수 없는 것은 Divi가 이 <video> 태그의 스타일을 지정하고 100% 너비를 지정하여 반응형이 되도록 하여 비디오가 해당 열의 너비에 맞게 조정된다는 것입니다.

이 HTML5 비디오 요소는 웹에서 비디오를 표시하는 새로운 표준 방법으로 성장하고 있습니다. 고맙게도 Divi는 우리를 위해 이것을 처리합니다.

자체 호스팅 비디오 이미지 오버레이

비디오 모듈에 비디오를 추가하는 옵션 외에도 Divi를 사용하면 비디오에 대한 사용자 정의 오버레이 이미지를 추가할 수도 있습니다.

자체 호스팅 비디오에 오버레이 이미지를 추가하기로 선택한 경우 직접 업로드해야 합니다. 비디오에서 이미지를 생성하는 옵션은 Youtube 및 Vimeo와 같은 타사 호스팅 비디오 URL에만 적용됩니다.

이미지가 비디오의 크기가 되고 비디오가 해당 열의 크기에 맞게 조정되기 때문에 올바른 크기의 이미지를 선택하는 것이 중요합니다. Youtube, Vimeo 및 대부분의 다른 형식의 비디오는 일반적으로 가로 세로 비율이 16:9입니다. 따라서 최대 콘텐츠 너비를 Divi의 기본값인 1080px로 설정한 경우 16:9 종횡비에 따라 비디오 크기는 1080×608이 됩니다. 따라서 오버레이 이미지는 1080×608 픽셀이어야 합니다.

재생 버튼

이미지가 설정되면 Divi가 자동으로 맞춤형 재생 버튼을 적용합니다. 디자인 탭의 비디오 설정에서 원하는 경우 버튼의 색상을 변경할 수도 있습니다.

사용자가 맞춤 재생 버튼이 있는 오버레이를 클릭하면 오버레이와 버튼이 사라지고 오버레이 아래의 비디오가 자동으로 재생되기 시작합니다.

타사 호스팅 비디오 URL 추가

비디오 모듈에 비디오를 추가하는 가장 일반적인 방법은 단순히 Youtube 또는 Vimeo와 같은 타사에서 호스팅하는 비디오의 URL을 추가하는 것입니다. 따라서 자체 호스팅 비디오에 대해 수행하는 것처럼 두 가지 비디오 형식을 추가하는 대신 상단 배경 입력 막대에 URL을 추가하기만 하면 됩니다.

무대 뒤에서 Divi는 유동 너비 래퍼 div를 추가하고 비디오를 표시하는 iframe을 포함합니다. 이 iframe은 YouTube에서 직접 가져오는 것과 동일합니다. 다음은 비디오 모듈을 사용하여 YouTube 비디오를 추가할 때 코드가 어떻게 보이는지 보여주는 예입니다.

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

"fluid-width-video-wrapper" 클래스가 있는 div는 iframe을 감싸고 너비를 100%로 지정하여 컨테이너의 너비에 맞게 조정하여 반응형으로 만듭니다.

오버레이 이미지를 추가하기로 선택한 경우 자신의 이미지를 업로드하도록 선택하거나 약간의 골칫거리를 줄이기 위해 "비디오에서 생성"을 클릭하기만 하면 Divi가 자동으로 비디오에서 가져온 오버레이 이미지를 적용합니다. 재생 버튼을 사용자 정의하도록 선택할 수도 있습니다.

비디오 슬라이더 모듈 탐색

비디오 슬라이더는 비디오가 슬라이더에 있다는 점을 제외하고 웹 페이지에 비디오가 배포되는 방식에서 비디오 모듈과 매우 유사하게 작동합니다. 이것은 사용자가 한 번에 하나씩 비디오 그룹을 스크롤할 수 있도록 한 곳에 비디오를 표시하는 편리한 방법입니다. 비디오 슬라이더 모듈 옵션에 대한 자세한 내용은 설명서 페이지를 참조하십시오.

비디오 슬라이더에서 내가 가장 좋아하는 요소 중 하나는 슬라이드를 제어하는 ​​데 사용할 수 있는 썸네일 트랙입니다. 편리하고 매력적입니다.

썸네일 오버레이 색상을 포함한 모듈 설정에서 슬라이더 컨트롤의 색상을 사용자 정의할 수도 있습니다.

축소판 이미지는 업로드한 원본 이미지의 크기로 유지되므로 슬라이더에 큰 이미지를 많이 업로드하면 사이트 속도가 느려질 수 있으므로 주의하십시오. 또한 썸네일은 비디오에서 자동으로 생성될 수 없습니다. 직접 업로드해야 합니다.

썸네일은 4:3의 종횡비를 따르므로 16:9 슬라이더 이미지를 조정하기 위해 전체 공간을 덮기 위해 이미지의 오른쪽과 왼쪽이 부풀어 오르고 잘립니다.

디자인 팁 : 파일 크기를 줄이고 썸네일에서 이미지의 일부가 잘리지 않도록 할 수 있는 한 가지 방법은 썸네일을 253×190픽셀(4:3 종횡비)로 사용자 지정하고 숨기기 옵션을 선택하는 것입니다. 메인 비디오에 이미지 오버레이를 표시합니다. 이렇게 하면 오버레이 이미지가 썸네일에만 사용되므로 기본 비디오 크기를 조정하기 위해 더 커질 필요가 없습니다.

동영상 셀프 호스팅을 위한 4가지 중요한 팁

1. CDN을 사용합니다. WordPress 미디어 라이브러리를 통해 동영상을 추가할 생각이라면 다시 생각해 보세요. 자체 서버의 자체 WordPress 설치에서 비디오를 호스팅하는 것이 가능하지만 대역폭, 파일 크기, 저장 공간 등에 대한 몇 가지 제한 사항이 있을 수 있습니다. 이로 인해 사이트 로드 시간이 느려지고 비디오 스트리밍이 지연될 수 있습니다. . Amazons3와 같은 외부 서비스에서 귀하의 비디오를 호스팅하는 것을 고려할 것입니다. 이것은 페이지 로드 시간에 도움이 됩니다. 또한 이러한 공급자 중 일부는 사람들이 비디오를 다운로드하지 못하도록(또는 최소한 다운로드를 더 어렵게 만드는) 수준의 보안을 제공합니다.
2. 웹용 파일 최적화. 비디오는 특히 큰 비디오 배경을 사용할 때 많은 대역폭을 차지합니다. 페이지에 과부하가 걸리지 않도록 주의해야 합니다. 웹용으로 비디오를 적절하게 최적화하려면 여러 가지 요소를 고려해야 합니다. 다음은 고려해야 할 유용한 방정식입니다.
   파일 크기 = 비트 전송률(초당 킬로비트) x 지속 시간(초 단위의 비디오 길이)

   따라서 더 작은 파일 크기를 얻으려면 지속 시간(비디오 길이) 및/또는 비트 전송률(전송되는 초당 킬로비트 수)을 줄여야 합니다. 비트 전송률은 항상 사용자의 연결 속도보다 낮아야 합니다. 전 세계 인터넷 속도가 약 7Mbps(미국은 약 18Mbps)임을 고려하면 스트리밍 중단을 방지하기 위해 비트 전송률을 이보다 훨씬 낮게 유지하는 것이 좋습니다.

   이 모든 작업을 직접 수행할 필요는 없습니다. Handbrake와 같은 비디오 압축에 도움이 되는 훌륭한 무료 도구가 있습니다.

   웹에 맞게 비디오를 최적화하는 방법에 대해 자세히 알아보려면 "더 빠른 로드를 위해 비디오 크기를 줄이는 5가지 가장 좋은 방법"을 읽는 것이 좋습니다. 몇 가지 훌륭한 리소스가 나열되어 있고 Handbrake를 사용하는 방법에 대한 훌륭한 설명이 있습니다.

3. 올바른 파일 형식을 추가합니다.
   이전에 언급했듯이 동영상을 자체 호스팅하는 경우(YouTube와 같이 타사에 의존하지 않음) 동영상을 mp4 및 webm 형식으로 추가해야 합니다.

   MP4는 여전히 플래시를 사용하여 일부 구형 브라우저를 재생하고 모바일 브라우저 지원을 위한 표준이기 때문에 현재 가장 널리 지원되는 형식입니다. Divi는 iOS 장치가 파일을 즉시 인식할 수 있도록 코드에서 mp4를 먼저 나열합니다.

   Webm은 두 번째로 많이 지원되는 형식입니다. 웹용으로 제작되었으며 계속 유지될 것 같습니다. 뛰어난 압축률로 고품질 스트리밍을 생성합니다. 그리고 오픈 소스입니다.

   이 두 가지를 결합하면 모바일을 포함한 대부분의 웹 브라우저에 대한 지원을 제공합니다.

   훌륭한 무료 변환 도구는 VLC 미디어 플레이어입니다.

4. MIME 유형 정의: WEBM 비디오 형식이 모든 브라우저에서 작동하려면 서버에 올바른 MIME 유형이 지정되어 있어야 합니다. 여기에서 .htaccess를 사용하여 MIME 유형을 정의하는 방법에 대해 자세히 알아볼 수 있습니다. 동영상이 특정 브라우저에서 재생되지 않는 것을 발견했다면 이것이 이유일 수 있습니다. .htaccess 파일에 MIME 유형을 추가하려면 FTP 클라이언트(예: FileZilla)를 사용하여 WordPress 루트 파일에 액세스하십시오. 거기에서 .htaccess 파일을 찾아야 합니다. 텍스트 편집기에서 파일을 엽니다. "#END WordPress"라는 줄 아래에 다음을 추가합니다.

   AddType 비디오/mp4 .mp4 .m4v
   AddType 비디오/ogg .ogv
   AddType 비디오/webm .webm

   

   그런 다음 파일을 저장합니다. 이제 비디오 형식이 모든 브라우저에서 인식됩니다.

타사 플랫폼으로 호스팅(Youtube 및 Vimeo)

자신의 비디오를 변환하고 압축하는 것이 너무 힘든 일이라면 언제든지 제3자에게 작업을 맡기실 수 있습니다.

영상에 대해 잘 모르시겠다면 이 길을 추천합니다. youtube 또는 vimeo 무료의 한계에 열광하지 않는다면 Vimeo Pro의 총알을 깨물 수 있습니다. 장기적으로 두통의 가치가 있을 수 있습니다. 당신이 원하지 않는 것은 당신의 사이트에 속도를 늦추거나 형편없이 보이는 비디오를 올리는 것입니다. 가치가 없습니다.

비디오 및 비디오 슬라이더 모듈에서 지원하는 타사 비디오 플랫폼

비디오 및 비디오 슬라이더 모듈을 사용하여 타사 비디오를 추가하려는 경우 다음과 같은 인기 있는 플랫폼을 사용할 수 있습니다.

• 유튜브
• 비메오
• 데일리모션

Divi를 사용하여 타사 비디오를 추가하는 방법

이러한 플랫폼에서 비디오를 추가하려면 해당 사이트로 이동하여 공유 링크를 가져와야 합니다.

그런 다음 비디오 또는 비디오 슬라이더 모듈에 붙여넣을 수 있습니다.

"비디오에서 생성" 버튼을 클릭하여 imag 오버레이를 추가합니다. 또는 자신의 것 중 하나를 업로드하십시오.

설정을 저장합니다. 그리고 그게 다야.

Divi는 WordPress를 기반으로 하므로 비디오 모듈을 사용하지 않고 제안된 포함 코드를 사용하여 타사 플랫폼의 비디오를 항상 포함할 수 있습니다. 텍스트 모듈을 추가하고 콘텐츠 상자 안에 포함 코드를 입력하기만 하면 됩니다.

반응형 레이아웃을 조정하기 위해 임베드의 너비와 높이를 사용자 지정해야 할 수도 있습니다.

위스티아는?

Wistia는 많은 사람들이 사용하는 강력한 플랫폼이지만 불행히도 현재 Divi 모듈과 잘 작동하지 않습니다. 그러나 제공하는 포함 코드를 사용하여 Wistia를 포함할 수 있습니다.

해당 코드를 Divi 사이트의 콘텐츠 섹션에 붙여넣으면 비디오가 표시됩니다.

슬라이더 모듈의 콘텐츠 섹션에 코드를 붙여넣어 등나무 비디오를 슬라이드 중 하나로 추가할 수도 있습니다. 그러나 원하는 대로 보이게 하려면 일부 CSS를 조정해야 합니다.

Divi에서 비디오 배경 사용하기

비디오 배경을 사용해야 합니까?

비디오 배경에 대한 세부 정보를 알아보기 전에 배경을 전혀 사용해야 하는지 여부를 정직하게 자문하는 것이 중요합니다. 오해하지 마세요. 저는 좋은 비디오 배경을 좋아합니다. 그러나 때때로 그것은 단지 의미가 없습니다. 그것에 대해 실수하지 마십시오. 비디오는 사이트 속도를 늦추고 콘텐츠에 주의를 산만하게 할 수 있습니다. 따라서 더 효과적인 이미지보다 비디오 배경을 선택하지 마십시오. 사이트가 없으면 사이트가 더 나을 수 있습니다.

그러나 비디오가 이미지보다 더 나은 솔루션인 경우가 있습니다. 제대로 완료되면 비디오 배경이 콘텐츠에 생기를 불어넣을 수 있습니다. 따라서 비디오를 목적에 맞게 만들고 중요하게 만드십시오.

Divi 내 비디오 배경 기능

Divi Builder를 사용하여 원하는 거의 모든 위치에 비디오 배경을 추가할 수 있습니다. 각 섹션, 행 및 열에 비디오 배경을 추가할 수 있습니다. 대부분의 모듈에 비디오 배경을 추가할 수도 있습니다.
다음은 비디오 배경을 지원하는 모듈입니다.

• 전체 너비 헤더(전체 화면 옵션에서도 작동)
• 전각 메뉴
• 전폭 포트폴리오
• 전각 포스트 슬라이더 (특집 이미지를 사용하지 않을 경우, 동영상 배경을 모든 슬라이드의 배경으로 사용할 수 있습니다.)
• 전각 게시물 제목
• 전각 슬라이더(개별 슬라이드에서 작동)
• 오디오 모듈
• 바 카운터
• Blurb 모듈 – 모듈에 약간의 패딩을 제공해야 합니다.
• 행동 유도 모듈
• 카운트 다운 타이머
• 이메일 옵틴
• 필터링 가능한 포트폴리오
• 로그인 모듈
• 숫자 카운터 모듈
• 사람 모듈
• 포트폴리오 설정
• 포스트 슬라이더 (특집 이미지를 사용하지 않을 경우, 동영상 배경을 모든 슬라이드의 배경으로 사용할 수 있습니다.)
• 게시물 제목
• 가격표(모듈 및 다른 표에 대해 개별적으로 비디오 배경을 설정할 수 있음)
• 슬라이더(개별 슬라이드의 배경에만 해당)
• 탭(모듈 배경 및 개별 탭 모두)
• 증명서
• 텍스트
• 비녀장

스톡 비디오 라이브러리

사이트에 비디오 배경을 추가할 때 어려운 부분은 올바른 이미지를 찾고 올바른 크기인지 확인하는 것입니다. 고맙게도 사용자 지정 비디오 배경을 만들 필요가 없습니다. 귀하의 웹사이트에 적합한 로열티 프리 스톡 비디오 라이브러리가 있습니다. 무료 비디오 푸티지를 찾고 있다면 시작하기에 좋은 곳은 videvo, coverr 또는 videezy입니다. 더 나은 품질의 유료 버전을 찾고 있다면 videohive, videoblocks 또는 연못5를 확인할 수 있습니다. 이러한 사이트 중 일부는 영감을 찾고 있다면 비디오 배경을 정말 잘 사용합니다.

페이지에 비디오 배경을 추가하는 방법

올바른 비디오를 찾거나 만든 후에는 작업이 정말 쉬워집니다. Divi 웹 페이지에 비디오 배경을 추가하려면 비주얼 빌더를 배포하고 비디오를 추가할 섹션을 찾은 다음 섹션 설정 아이콘을 클릭하기만 하면 됩니다.

콘텐츠 탭에서 배경 옵션 아래의 배경 이미지 아이콘/탭을 클릭합니다. 자체 호스팅 비디오가 있는 경우 mp4 및 webm 형식을 모두 입력하십시오. 그런 다음 Divi가 적절하게 크기를 조정하는 방법을 알 수 있도록 비디오의 크기를 입력합니다.

이제 배경 이미지 탭으로 이동하여 모바일 장치에 대한 좋은 대체 역할을 할 배경 이미지를 추가합니다.

그런 다음 설정을 저장합니다. 간단합니다.

현재 youtube(또는 vimeo)에서 호스팅하는 비디오 중 하나를 배경으로 사용할 계획이라면 현재 Divi 빌더 내에서는 불가능합니다. 모든 브라우저에 표시하려면 올바른 형식의 비디오가 필요합니다. 그러나 해당 Youtube 비디오(본인 소유인 경우)를 다운로드하고 배경에서 사용할 mp4 및 webm 형식으로 변환할 수 있습니다.

배경 디자인 팁: 전각 포스트 슬라이더에 비디오 배경 사용하기

블로그 페이지에 추천 게시물을 표시할 창의적인 방법을 찾고 있다면 게시물 슬라이더에 비디오 배경을 추가할 수 있습니다. 내가 의미하는 바를 보여 드리겠습니다.

Visual Builder를 사용하여 페이지로 이동하고 전체 너비 포스트 슬라이더 모듈을 사용하여 페이지 상단에 전체 너비 섹션을 추가합니다.

콘텐츠 탭의 추천 이미지 표시에서 "아니오"를 선택합니다.

그런 다음 배경 섹션에서 비디오 배경 탭을 선택하고 크기와 함께 비디오의 두 형식을 모두 추가합니다.

비디오 배경을 표시할 수 없는 모바일 장치에 대한 대체로 배경 이미지를 추가하는 것도 좋은 생각입니다.

그게 다야

이제 사용자는 멋진 배경 비디오와 함께 추천 게시물 슬라이더를 스크롤할 수 있습니다. 동영상 배경이 콘텐츠에 방해가 되지 않을 만큼 은은하게 되었는지 확인하세요.

비디오 배경 모범 사례

비디오 배경이 제공하는 모든 가능성과 함께 몇 가지 일반적인 모범 사례를 포함하는 것이 가장 좋다고 생각했습니다.

1. 모바일용으로 항상 배경 이미지를 포함하세요. 모바일 장치는 대용량 비디오를 자동 재생하지 않습니다. 이것이 Divi가 모바일 장치에서 기본적으로 대체 이미지를 표시하는 이유입니다.
2. 작은 비디오를 사용하십시오. 배경 비디오의 경우 배경은 비디오를 오버레이하는 콘텐츠/텍스트에 대한 두 번째 생각이므로 720p 해상도로 벗어날 수 있습니다. 품질은 당신이 알아차릴 만큼 크게 떨어지지 않을 것입니다.
3. 오버레이를 고려하십시오. 비디오 위에 반투명 색상 오버레이를 추가하면 품질이 낮은 비디오의 지저분한 세부 사항을 숨길 수 있으므로 더 작은 파일 크기로 벗어날 수 있습니다. 또한 텍스트를 더욱 돋보이게 만듭니다.
4. 오디오를 사용하지 마십시오. 비디오 배경에는 사운드가 필요하지 않으므로 제거하십시오. 이것은 파일 크기를 줄입니다.
5. 크로스 브라우저 지원을 위해 mp4 및 webm 형식을 모두 사용합니다.

동영상을 일시중지하시겠습니까?

배경 옵션 아래의 설정에 이 옵션이 나열되어 있을 수 있습니다.

경우에 따라 비디오가 다른 비디오 배경 재생 사운드와 충돌할 수 있습니다. 이 옵션은 한 번에 하나의 비디오 사운드만 재생하는 데 도움이 됩니다.

Divi 비디오 해킹

도움이 될 수 있는 몇 가지 고급 비디오 및 비디오 배경 사용자 정의가 있습니다. 여기에 몇 가지가 있습니다.

재생 버튼 크기 조정

재생 버튼의 크기를 변경하려면 고급 탭 아래의 비디오 모듈 설정으로 이동하여 "비디오 아이콘"이라고 표시된 상자에 다음 사용자 정의 CSS를 입력하십시오.

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

값을 원하는 크기로 조정할 수 있습니다. font-size와 line-height가 항상 동일하게 유지되고 margin-top 및 margin-bottom이 항상 font-size의 절반인 음수 값으로 유지되는지 확인하십시오. 예를 들어 더 작게 만들고 싶다면 값은 다음과 같습니다.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

클릭 시 비디오 배경이 일시 중지되는 것을 중지하는 방법

경우에 따라 비디오 배경을 클릭하면 비디오가 일시 중지될 수 있습니다. 하위 테마(또는 테마 사용자 정의 도구 > 추가 CSS)의 style.css 파일에 다음 사용자 정의 CSS를 추가하여 이 기능을 비활성화할 수 있습니다.

.et_pb_section_video_bg video {
pointer-events: none;
}

비디오 배경이 반복되는 것을 막는 방법

이전 게시물 중 하나에서 이 팁을 기억했을 수 있습니다. 기본적으로 비디오 배경은 계속 반복됩니다. 이것은 일반적으로 비디오 배경에서 수행하려는 작업이기 때문에 의도된 것입니다. 그러나 배경 비디오를 한 번만 표시하고 종료하려면 Divi > 테마 옵션 > 통합 으로 이동하여 루프 동작을 비활성화하고 다음을 입력합니다.

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Divi용 비디오 크기

비디오 크기를 언급하지 않고 게시물을 끝내고 싶지 않았습니다. 모든 비디오와 웹사이트가 다르기 때문에 어떤 치수를 사용해야 하는지에 대한 확고한 규칙은 없습니다. 720p(1280×720) 비디오는 1920×1080 화면에서 잘 늘어나는 반면 다른 비디오는 끔찍하게 보일 수 있습니다. 사이트에 대한 비디오의 크기 또는 해상도를 결정할 때 Divi의 열 레이아웃 및 모듈에 대한 이미지 크기를 일반적인 지침으로 따를 수 있습니다. 간단히 말해서, 비디오는 아래로 내려가지 않고 있는 열의 너비에 가장 가까워야 합니다. 따라서 최대 너비가 1080px인 전체 너비 열이 있는 경우 해상도가 720p(1280×720)보다 큰 비디오는 필요하지 않습니다. 그러나 브라우저의 전체 너비에 걸쳐 있는 비디오 배경을 사용하는 경우 최대 1080p(1920×1080)로 이동해야 더 큰 모니터에서 브라우저의 전체 너비에 걸쳐 있을 때 그렇지 않습니다. 거친 모양.

웹용 비디오를 준비하기 위해 타사 비디오 전문가에 의존하려는 경우 YouTube에 권장되는 비디오 해상도 목록은 다음과 같습니다.

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

이것은 16:9 종횡비를 따르므로 비디오 측면에 검은색 막대가 표시되지 않습니다.

Vimeo는 비디오에 대한 지침도 제공합니다. 저는 특히 비디오 압축 기본 사항에 대한 Vimeo의 게시물을 좋아합니다.

마지막 생각들

비디오는 오랫동안 온라인 경험의 필수적인 부분이 될 것입니다. 따라서 웹 사이트에 비디오를 추가할 때 무엇을 하는지 아는 것이 중요합니다. 웹사이트에서 비디오를 사용하기로 결정한 경우 Divi는 자체 호스팅 비디오를 위한 크로스 브라우저 솔루션과 타사 임베딩을 위한 편리한 솔루션을 제공하여 프로세스를 매우 간단하게 만듭니다. 그러나 Divi는 당신을 위해 모든 것을 할 수 없습니다. 이 게시물이 올바른 비디오를 선택하고 웹용으로 준비하는 과정에 도움이 되기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.