WordPress에서 전체 화면 배경으로 비디오를 추가하는 방법
게시 됨: 2019-02-01비디오는 굉장합니다. 사진보다 더 많은 시선을 사로잡는 미디어를 제공하고 더 많은 감정을 포착합니다.
이제 점점 더 많은 웹마스터/브랜드가 웹사이트에 완전한 배경으로 비디오를 포함하는 방향으로 움직이고 있습니다. 그러나 비디오를 배경에 포함하는 복잡성에는 약간의 기술 전문 지식이 필요합니다.
독자를 위해 모든 것을 간단하고 훌륭하게 만들기 위해 배경에 포함된 비디오에 대한 무료 플러그인을 나열하고 간단한 구성으로 배경에 비디오를 포함하는 방법에 대한 자세한 자습서도 진행합니다.
참고: 콘텐츠를 완전히 이해하려면 약간의 코딩 경험이 필요합니다. 헷갈리는 부분이 있으면 댓글로 질문해 주세요.
WordPress에서 전체 화면 배경으로 비디오를 추가하는 플러그인
플러그인은 훌륭하며 몇 번의 클릭으로 필요한 기능을 제공합니다. 코딩을 사용하여 배경에 비디오를 삽입하는 방법에 대한 자세한 자습서로 이동하기 전에 몇 가지 플러그인을 나열하겠습니다.
1. 배경 비디오용 mb .YTPlayer
백그라운드 통합을 위한 인기 있는 비디오 플러그인 중 하나입니다. 플러그인은 페이지 요소 내부에 사용자 정의 플레이어를 통합합니다.
플러그인을 사용하여 사용자는 페이지 및 게시물에 비디오를 쉽게 통합할 수 있습니다. 설치는 간단하고 플러그인은 쉬운 통합을 위해 단축 코드를 생성합니다.
플러그인은 반응형 레이아웃을 완전히 지원하지 않습니다.
전체 세부 정보 및 다운로드 | 데모
2. 애니메이션 효과가 있는 슬라이더 영웅
플러그인의 동기는 슬라이더 효과를 사용하여 WordPress에 비디오 배경을 포함할 수 있도록 하는 것입니다. 플러그인은 11개의 배경 애니메이션, 배경 음악 추가 기능, YouTube 및 Vimeo 비디오 통합 등을 제공합니다.
플러그인은 모든 WordPress 테마 또는 Gutenberg와 같은 편집기와 호환되므로 모든 WordPress 웹사이트에서 반응이 빠르고 빠릅니다.
전체 세부 정보 및 다운로드 | 데모
이제 진짜 부분이 나옵니다. 다음 부분은 WordPress 플랫폼의 코딩 및 기술 작업이 필요합니다.
비디오 임베딩에는 많은 단계가 필요합니다. 단계를 하나씩 살펴보겠습니다. 이러한 단계를 이해하면 간단한 것이 얼마나 복잡해질 수 있는지 이해할 수 있습니다.
1. Div를 사용하여 비디오 공간 만들기.
2. 절대 또는 고정에서 뷰포트의 왼쪽 상단에 Div 위치를 지정합니다. 다음 단계는 높이와 너비를 100%로 설정한 다음 z-색인을 1로 설정하는 것입니다. Z-색인은 콘텐츠의 깊이를 정의합니다.
3. JavaScript를 사용하여 Div 비디오 크기 조정.
4. 모니터 화면은 사용자가 비디오 크기를 조정할 때마다 비디오 크기를 조정하고 다시 크기를 조정합니다.
5. 코드가 다른 브라우저와 모바일 OS에서 작동하는지 확인하십시오.
많은 코딩처럼 보이지만 WordPress 게시물 또는 페이지의 배경에 비디오를 포함하는 프로세스를 자동화하기 위해 간단한 사용자 정의 플러그인을 사용할 것입니다.
BGVIDEO: 다운로드
플러그인을 다운로드하고 일반 설치를 진행합니다(다른 플러그인 설치와 동일).
이 간단한 플러그인은 단축 코드와 함께 작동하며 플러그인에서 "bgvideo"라는 단축 코드를 사용할 수 있습니다. 단축 코드는 모든 페이지나 게시물에 비디오를 삽입하는 관문 역할을 합니다.
계속 진행하기 전에 전체 기능을 위해 단축 코드에 일부 매개변수를 제공해야 합니다.
매개변수는 높이, 너비, mp4, webm, ogg, 자동 재생, 루프, 음소거 및 고정입니다. 높이와 너비는 각각 비디오의 높이와 너비를 나타냅니다. mp4, webm, ogg 필드는 해당 비디오 형식의 URL을 나타냅니다. 동영상이 여러 장치에서 문제 없이 실행되도록 각 형식의 URL을 제공해야 합니다.
미디어 라이브러리에 비디오 추가
다음 단계에는 미디어 라이브러리에 비디오를 추가하는 작업이 포함됩니다. 미디어 라이브러리에 모든 형식(webm, ogg, mp4)을 추가했는지 확인합니다.
bgvideo의 도움으로 비디오 단축 코드가 bgvideo로 변환됩니다.
동영상 숏코드는 아래와 같습니다.
[%비디오 너비=”1280″ 높이=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/비디오] [%비디오 너비=”1280″ 높이=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/비디오]<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”비디오 배경-테스트” 너비=”1024″ 높이=”576″ />
동영상 숏코드 및 앵커 태그 앞의 백분율(%) 기호를 제거하는 것을 잊지 마십시오.
bgvideo의 도움으로 위의 코드는 아래 코드로 변환됩니다.
[bgvideo 너비="1280" 높이="720" mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 포스터="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 고정="아니요"]
플러그인은 자동으로 비디오 단축 코드를 bgvideo 단축 코드로 변경합니다.
비디오를 사용자에게 투명하게 만들기
모든 설정이 끝나면 페이지 CSS 속성에서 약간의 마법을 수행해야 합니다. 그 이유는 페이지의 내용이 비디오 표시를 방해하기 때문입니다.
CSS는 페이지의 콘텐츠를 제거하고 방문자를 위해 비디오를 빛나게 합니다.
모든 것이 잘 작동하도록 아래 CSS 코드를 삽입하십시오.
#페이지{
배경:없음;
}
비디오 배경을 완전히 설정하는 데 필요한 다른 조정이 많이 있습니다.
마무리
독자를 위한 최선의 방법은 본격적인 플러그인을 사용하고 코딩 부분을 무시하는 것입니다. 코딩 부분은 코딩을 모르는 경우에만 상황을 악화시킬 뿐입니다. 필요를 개발자에게 돌릴 수 있지만 무료는 아닙니다.
또 다른 훌륭한 대안은 애니메이션 GIF를 배경으로 사용하는 것입니다. 애니메이션 GIF를 사용하는 데에는 두 가지 이유가 있습니다. 첫 번째는 비디오에 비해 낮은 대역폭 사용이고 두 번째는 쉬운 설치입니다. 또 다른 큰 장점은 휴대성 및 기타 장치 호환성 문제에 대해 걱정할 필요가 없다는 것입니다.
애니메이션은 CSS를 사용하여 쉽게 구성하거나 일반적인 배경 변경을 통해 업로드할 수 있습니다.
비디오 배경의 복잡성은 약간 높으며 WordPress 커뮤니티 또는 핵심 팀은 이를 기록하고 향후 릴리스에서 변경할 수 있습니다.
비디오가 있고 gif로 변환하려는 경우 이를 수행할 수 있는 온라인 리소스가 있습니다. 그러나 변환된 GIF는 최적화되지 않고 많은 무게를 수반합니다.
포함하려는 비디오를 조정해야 하는 경우 몇 가지 훌륭한 무료 비디오 편집기를 찾을 수 있습니다. 비디오를 자르거나 자르거나 확대/축소하거나 텍스트를 추가하거나 색상 테마를 조정하여 웹사이트 스타일과 일치하도록 해야 할 수 있습니다.
Mac을 사용하는 경우 iMovie가 컴퓨터에 이미 사전 설치되어 있기 때문에 당연히 사용할 수 있습니다(아직 설치되어 있지 않은 경우 무료로 받을 수 있음). Windows를 사용 중이라면 VSDC Free Video Editor가 탁월한 선택입니다. 기본 분할/자르기 도구 세트에서 색상 보정 및 비디오 스타일 사전 설정에 이르기까지 말 그대로 필요한 모든 것을 갖추고 있습니다. 또한 형식과 관련하여 매우 강력하며 출력 파일의 품질을 희생할 필요가 없습니다.
내가 뭔가를 놓친 것 같아? 아래에 의견을 남기고 알려주십시오.
*최종 업데이트 2019년 2월 25일