[Divi 테마] 슬라이더 모듈에서 YouTube 동영상이 절반 크기로 표시되는 경우

이전 글에서 Divi 테마에서 전체 폭으로 동영상 배경을 추가하는 방법을 살펴보았습니다. 그리고 Video Slider에 대해서도 소개했습니다.

동영상을 추가하는 방법으로 동영상 배경으로 추가하거나 동영상(Video) 모듈 또는 동영상 슬라이더(Video Slider) 모듈을 사용하는 방법 외에 일반 슬라이더(Slider) 모듈을 사용하는 것도 가능합니다.

모듈을 사용하는 경우에는 세 가지 중에서 마음에 드는 것을 선택하면 될 것 같습니다.

이 글에서는 "슬라이더" 모듈을 사용하여 YouTube 동영상 링크를 추가하여 유튜브 동영상을 표시할 때 유튜브 동영상이 전체 크기로 표시되지 않는 문제에 대해 다루어보려고 합니다.

예를 들어, 아래와 같이 슬라이더 모듈을 배치하고:

YouTube 동영상 링크를 추가해보면 생각과 달리 전체 길이가 아니라 절반 크기로 표시될 수 있습니다.

이 경우 다음과 같은 방법으로 Row(행)를 채우도록 만들 수 있습니다.

먼저 슬라이더 모듈에 CSS 클래스를 추가하도록 합니다. 슬라이더 모듈 설정 -> 고급 -> CSS ID & 클래스로 이동합니다.

CSS 클래스에 원하는 클래스 이름을 추가합니다. (예: custom-slider.)

그런 다음 Divi > 테마 옵션 > 일반 > 사용자 맞춤 CSS(영문 UI: Divi > Theme Options > General > Custom CSS)로 이동한 후에 다음 CSS 코드를 추가합니다.

.custom-slider .et_pb_slide_video {
width: 100%;
}

이 상태에서 페이지를 새로 고침해보면 폭은 정상적으로 나오지만 높이(세로 길이)가 절반 크기로 표시될 것입니다.

슬라이더 모듈 설정 > 디자인으로 이동하여 사용자정의 내부 여백에서 상단을 30%, 아래를 30%로 설정하도록 합니다.

이제 저장한 다음 페이지를 새로 고침해보면 아래 그림과 같이 제대로 표시될 것입니다.

여기에서 데모를 확인할 수 있습니다.

Elegant Themes의 Divi 테마에서는 여러 가지 방법으로 동영상을 추가할 수 있습니다. 상황에 맞는 적절한 방법을 선택하여 동영상을 추가할 수 있습니다.