Отображение заголовка видео при наведении курсора в слайдере Divi Builder

Question

Использование Divi Video Slider Module для отображения набора видео. Мы хотели бы отображать заголовок видео при наведении курсора на каждое видео. Диви говорит, что в настоящее время они не поддерживают эту функцию, но сказал, чтобы проверить сообщество разработчиков для ответов.

См. Тестовую страницу по адресу https://work.gmmb.com/project/political.. Попытка отредактировать класс наведения, но не сработала.

Есть класс в class = "et_pb_video_overlay_hover" Не уверен, как мы можем использовать это для отображения заголовка видео из библиотеки мультимедиа WordPress.

Любые хорошие кодировщики Divi, которые пробовали это или могутзнаете нестандартное решение CSS или JS?

Answer 1

Очень быстрый обходной путь - использовать :after псевдоэлемент на class="et_pb_video_overlay_hover". Вы можете поместить название в content: примерно так:

.et_pb_video_slider_item_0 .et_pb_video_overlay_hover::after {
    content: "Title";
    // Title will be small, white and centered at the top of 
    // the video. Use other CSS properties to style your titles.
}

Первое видео .et_pb_video_slider_item_0, второе видео .et_pb_video_slider_item_1 и т. Д.

Это быстрое решение, которое выможно сразу реализовать.

Редактировать - я только что взглянул на модуль Divi Video Slider, чтобы посмотреть, можно ли его отфильтровать. Код, который вам нужен, находится в следующих файлах:

/wp-content/themes/Divi/includes/builder/module/Slider.php
/wp-content/themes/Divi/includes/builder/module/SliderItem.php

Я пытался использовать Admin Label , чтобы установить заголовок для каждого видео, затем распечатать его на экране на оверлее, ноэто не доступно во время рендера. Я вижу, что content_unprocessed содержит заголовок:

["content_unprocessed":protected]=> string(339) 
"[et_pb_video_slider_item admin_title="Video Title Goes Here" src="https://www.youtube.com/watch?v=FkQuawiGWUw" ... "][/et_pb_video_slider_item]"

, но он защищен и не доступен напрямую из функции рендеринга.

Боюсь, что для этого потребуются некоторыедолгое и утомительное кодирование, чтобы заставить это работать. Более простыми решениями являются использование вышеуказанного хака CSS или просто вставка заголовка в ваши оверлейные изображения.