두 개의 관련 작업. 비디오 캐러셀이 수평 트랙의 비디오를 통해 슬라이드합니다. A 갤러리 슬라이더 아래에 썸네일 스트립이 있는 하나의 큰 미리보기를 보여줍니다. 이는 사람들이 “비디오 캐러셀”이라고 말할 때 실제로 원하는 레이아웃입니다. 동일한 크기의 비디오 썸네일 행은 무엇이든 시청하는 데 더 나쁜 방법이기 때문입니다.
아래 둘 다, 플러스 비디오 캐러셀을 페이지에 넣을 수있는 가장 느린 위젯으로 만드는 임베드 문제와 그에 대한 한 줄 수정. 두 위젯은 의 일부입니다 전체 회전 목마 위젯 컬렉션.
페이지 속도 문제로 시작
한 페이지에 포함된 6 개의 YouTube 는 단일 동영상이 재생되기 전에 대략 3MB 의 타사 JavaScript 입니다. 모든 iframe 은 누군가가 클릭하든 안하든 YouTube 플레이어,분석 및 쿠키 인프라를 로드합니다.
그 6개를 회전목마에 넣으면 상황이 더 악화되기 때문입니다 회전목마는 모든 슬라이드를 렌더링합니다화면 밖의 것을 포함하여 6개의 iframe이 모두 한 번에 초기화됩니다.
수정 사항은 다음과 같습니다 외관: 재생 버튼으로 비디오의 포스터 이미지를 표시하고,누군가가 클릭 할 때만 실제 임베드를로드합니다. 6 명의 플레이어 대신 하나의 이미지. 대부분의 비디오 위젯에는 “게으른로드”또는 “클릭하여 재생”옵션이 있습니다. 이 작업을 수행합니다; 켜면 페이지가 모바일에서 몇 초 더 빨라집니다.
위젯이 제공하지 않는 경우 인라인 삽입 대신 라이트 박스가있는 포스터 이미지를 사용하십시오. 동일한 시각적 결과,중량의 일부.
방법 1: 갤러리 슬라이더, 미리보기 및 축소판
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 갤러리 슬라이더 위젯 대부분의 비디오 및 사진 갤러리가 원하는 레이아웃을 제공합니다: 스크롤 가능한 썸네일 스트립이 있는 큰 미리보기 창입니다. Pro 위젯이고 이미지 위젯이므로 재생이 아닌 레이아웃을 구축합니다. 갤러리가 이미지 전용이고 비디오가 없는 경우 비트린 플레이트 갤러리 는 동일한 플레이트 플러스 썸네일 레이아웃을 가진 무료 가져오기 가능한 디자인이지만 비디오를 처리하지 않습니다.
- 갤러리 슬라이더에서 드래그하십시오 그리고 콘텐츠 탭을 엽니다.
- 갤러리를 만드세요 미디어 라이브러리에서. 여기서 포스터 프레임을 의미하는 비디오 세트의 경우 재생은 방법 2 또는 3으로 처리됩니다.
- 썸네일 켜기 그리고 썸네일 스트립을 캐러셀 모드로 설정하여 기본 미리보기와 독립적으로 스크롤됩니다.
- 미리보기 위치 설정: 아래,위, 왼쪽 또는 오른쪽의 축소판. 아래는 안전한 기본값입니다; 왼쪽 또는 오른쪽은 세로 콘텐츠에 적합합니다.
- 미리보기 너비를 설정합니다 따라서 메인 창은 태블릿에서 썸네일을 화면 밖으로 밀어내지 않습니다.
위젯의 모든 필드는 에 나열되어 있습니다 갤러리 슬라이더 문서 짧은 경로가 아닌 전체 참조를 원하는 경우.
썸네일 캐러셀 모드는 이 스케일을 만드는 설정입니다. 썸네일이 없으면 20 개의 썸네일이 4 개의 행으로 감싸져 전체 뷰포트를 먹습니다. 그것으로 스크롤 가능한 한 줄에 머물러 있습니다.
모바일에서는 3~4개의 미리보기 아래 축소판이 보입니다. 왼쪽 및 오른쪽 위치는 자동으로 아래, 즉 오른쪽으로 축소됩니다. 390px 화면의 측면 스트립은 미리보기에 아무것도 남기지 않기 때문입니다.
방법 2: 미디어 회전 목마, 트랙에서 재생되는 비디오
동영상이 클릭 뒤에 재생되지 않고 캐러셀 내부에서 재생되어야 하는 경우 Elementor Pro 의 미디어 캐러셀이 이를 수행하는 위젯입니다. 각 슬라이드는 이미지 또는 비디오로 설정되고 비디오 슬라이드는 YouTube,Vimeo 또는 자체 호스팅 URL 을 사용하므로 혼합 세트가 하나의 트랙에서 작동합니다.
세트가 코스,튜토리얼 시리즈 또는 채널 아카이브와 같이 스트립이 아닌 실제로 라이브러리 인 경우 Elementor Pro 의 비디오 재생 목록이 더 나은 모양입니다. 플레이어 옆에 나열된 비디오는 각각 제목과 기간이 있으며 플레이어는 페이지로드없이 스왑 캐러셀이 아닌 목록이며,그것이 그 주장입니다: 제목은 사람들이 무엇을 볼 지 결정하는 방법이며,일련의 썸네일은 추측하게 만듭니다.
다시 회전목마로 돌아갑니다. 미디어 회전목마는 여기서 비디오를 인라인으로 재생하는 유일한 위젯이며,그것도 비용이며,아래의 설정은.
- 라이트박스 모드 켜기. 인라인 재생은 모든 슬라이드가 플레이어를 운반한다는 것을 의미합니다. Lightbox 모드는 포스터를 보여주고 클릭시 플레이어를로드합니다. 이는 위젯에 내장 된이 게시물의 상단에서 외관 패턴입니다.
- 첫 번째 비디오를 자동 재생하지 마십시오. 프롬프트없이 소리 발사는 사람을 잃는 가장 빠른 방법입니다. 자동 재생해야하는 경우 음소거하십시오.
- 캡션에 런타임을 넣습니다. “이건 얼마나 오래?” 는 누군가가 비디오에 대해 묻는 첫 번째 질문이며, 클릭이 완료율을 높이기 전에 대답합니다.
방법 3: 무료, 포스터 회전 목마 클릭 뒤에 비디오와 함께
라이센스가 없고 여전히 비디오 캐러셀을 원하시나요? 두 개의 무료 경로가 있으며, 누군가가 요청할 때까지는 아무것도 로드되지 않으므로 둘 다 페이지를 빠르게 유지합니다.
- 각 비디오의 포스터 프레임을 내보내고 이미지로 업로드합니다.
- 무료 이미지 회전목마 갤러리에 추가하세요.
- 라이트박스를 켜면 클릭 한 번으로 페이지를 탐색하는 대신 페이지 위로 프레임이 열립니다.
- 스타일 탭에 재생 버튼 오버레이를 추가하여 슬라이드가 사진이 아닌 비디오로 읽히도록 합니다. 없으면 아무도 클릭하지 않습니다.
그러면 모양이 나옵니다. 얻을 수 없는 것은 슬라이드마다 다른 목적지입니다. 갤러리 기반 캐러셀은 모든 슬라이드에 동일한 링크를 제공하기 때문입니다. 각 비디오에 자체 페이지가 필요한 경우 각 비디오에 게시물을 제공하고 무료를 사용하십시오 블로그 위젯 대신 회전 목마 모드에서: 그것은 썸네일, 제목 및 비디오가 앉아있는 게시물에 대한 링크를 당깁니다. 프로에서, the 루프 회전목마 쿼리에서 동일한 작업을 수행하므로 페이지를 편집하지 않고도 새 비디오가 나타납니다.
이것은 포스트의 꼭대기에서부터의 정면 패턴입니다. 손으로 만든 것입니다. 존재하는 비디오 회전목마의 가장 빠른 버전입니다. 왜냐하면 누군가가 요청하기 전까지는 아무것도 로드되지 않기 때문입니다. 이미지 회전목마 연습 위젯을 완전히 덮습니다.
종횡비, 그리고 그것을 깨뜨리는 것
16:9를 설정하고 모든 슬라이드에 설정합니다. 비디오 캐러셀의 혼합 비율은 다양한 높이의 카드를 생성하며, 거친 하단 가장자리가 용서되는 그리드와 달리 수평 스트립은 모든 불일치를 이웃 바로 옆에 배치합니다.
제품 카드는 같은 이유로 같은 일을 겪게 됩니다 WooCommerce 제품 회전목마 가이드 레벨을 올리는 방법을 다룹니다.
일반적인 범인은 그렇지 않으면 풍경 세트에서 하나의 수직 클립입니다. 어느 자신의 회전 목마를 제공하거나 배경이 일치하는 16:9 로 레터 박스를. 하나의 9:16 비디오가 열한 풍경 하나에 대한 높이를 설정하지 마십시오.
비디오 스키마
동영상이 귀하의 콘텐츠이고 검색에 중요한 경우 추가하세요 VideoObject 스키마: 이름,설명, 썸네일 URL,업로드 날짜 및 기간. 비디오 리치 결과를 가능하게 하는 것입니다.
사람들이 놓치는 두 가지 조건: 비디오는 장식이 아닌 페이지의 주요 콘텐츠여야 하며 썸네일 URL은 공개적으로 크롤링 가능해야 합니다. 정보 페이지에 포함된 6개의 비디오 갤러리는 페이지의 주요 콘텐츠가 비디오가 아니기 때문에 표시한 대로 비디오 리치 결과를 얻을 수 없습니다.
자주 묻는 질문
Elementor에 비디오 캐러셀 위젯이 있습니까?
Elementor Pro 의 미디어 캐러셀은 하나의 캐러셀에서 이미지와 비디오를 처리합니다. Elementor free 에는 포함되지 않습니다. Master Addons 는 미리보기 플러스 섬네일 레이아웃을 위해 Pro 계층에 갤러리 슬라이더를 추가하고 비디오 플레이어가 아닌 이미지 위젯입니다. 무료 이미지 캐러셀은 라이트 박스가있는 포스터 이미지를 사용하여 비디오 캐러셀을 대신 할 수 있습니다.
Elementor 에서 YouTube 캐러셀을 어떻게 추가하나요?
라이브 엠베드보다는 포스터 이미지를 사용합니다. 각 비디오의 썸네일을 캐러셀에 추가하고 슬라이드를 비디오 URL 에 연결한 다음 라이트박스를 활성화하여 페이지 위로 열리게 합니다. 한 페이지에 있는 6 개의 라이브 YouTube iframe 은 타사 JavaScript 의 약 3MB 입니다; 6 개의 포스터 이미지는 그 일부분입니다.
비디오 캐러셀을 추가한 후 페이지가 느려지는 이유는 무엇입니까?
캐러셀에 포함된 모든 항목은 캐러셀이 모든 슬라이드를 렌더링하기 때문에 화면 밖에 있는 슬라이드를 포함하여 플레이어를 즉시 로드합니다. 위젯의 게으른 로드 또는 클릭 투 플레이 옵션을 켜서 누군가가 클릭할 때까지 포스터 이미지만 로드하거나 라이트박스로 포스터 이미지로 전환합니다.
갤러리 슬라이더와 이미지 회전목마의 차이점은 무엇인가요?
갤러리 슬라이더에는 두 개의 연결된 부분이 있습니다: 하나의 큰 미리보기 창과 이를 탐색하는 축소판 스트립. 이미지 캐러셀은 동일한 크기의 슬라이드가 한 줄로 표시됩니다. 항목이 한 번에 하나씩 제대로 볼 자격이 있을 때 갤러리 슬라이더를 사용하십시오; 세트를 보여줄 때 캐러셀을 사용하십시오.
Elementor 슬라이더에 축소판을 추가하려면 어떻게 해야 합니까?
갤러리 슬라이더 위젯을 사용하고 콘텐츠 탭에서 축소판을 사용하도록 설정하고 축소판 스트립을 회전식 모드로 전환하여 긴 세트가 행으로 감싸는 대신 스크롤 가능한 한 줄에 머물도록 합니다. 레이아웃 아래에서 미리보기 위치,아래, 위,왼쪽 또는 오른쪽으로 설정합니다.
하나의 Elementor 캐러셀에 이미지와 비디오를 혼합할 수 있나요?
예. Elementor Pro 의 미디어 캐러셀은 기본적으로 혼합 유형을 지원합니다. 무료 이미지 캐러셀을 사용하면 동영상에 포스터 이미지를 사용하고 해당 슬라이드를 동영상 URL 에 연결하므로 이미지와 동영상 모두 슬라이드처럼 작동하고 클릭 시 동영상만 로드됩니다.
어느 것을 지을 것인가
코스 또는 튜토리얼 시리즈: Elementor Pro 의 비디오 재생 목록,타이틀과 기간이 작업을 수행하기 때문에. 캐러셀 트랙에서 재생해야하는 비디오: 라이트 박스 모드가 켜져있는 미디어 캐러셀. 포트폴리오 릴 또는 제품 데모: 썸네일이있는 갤러리 슬라이더. 마케팅 페이지에 비디오의 소수와 라이센스 없음: 포스터 이미지와 라이트 박스가있는 무료 이미지 캐러셀,또한 세 가지 중 가장 빠른. 그리고 비디오가 영웅 섹션에 대한 배경 텍스처 만 있었다면 무료 배경 슬라이더 확장 대신 루핑 비디오 무게의 일부로 정지 이미지를 회전합니다.
스무 명 중 아무도 위젯 빌더 디자인은 비디오를 다루므로 이것은 스톡 위젯이 답이 되는 하나의 작업입니다. 세트의 다른 모든 것에 대해서는 가격 페이지 어떤 계층이 적용되는지 보여줍니다 회전목마 대 슬라이더 형식 문제를 먼저 해결합니다.
그들 모두는 에 있습니다 요소 회전목마 위젯 페이지, 그리고 무료 대 Pro 분석 각각이 앉는 계층을 다룹니다.
