Hover Video Preview, видео превью подсказки при наведении на любой элемент

видео превью подсказка Прибамбасы для сайта

 Продолжаем разбирать самые интересные и полезные плагины для сайта wordpress. Сегодня вы узнаете как очень просто создавать видео превью подсказки при наведении на любой элемент. Как это выглядит ? Вы вставляете в запись или на страницу специальный шорткод, между шорткодом вставляете любой элемент, текст, изображение и т.д. На сайте при наведении курсора мыши на изображение или текст, будет появляться видео подсказка. То есть над элементом будет появляться видео и автоматически воспроизводиться.

 

видео-превью

 

 Установить плагин Hover Video Preview вы сможете прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

плагин wordpress

 

 После установки и активации плагина, перейдите на страницу: НастройкиHover Video Preview. Плагин не имеет настроек, здесь вам нужно только скопировать шорткод. Скопируйте шорткод.

 

настройки шорткод

 

 Далее, откройте для редактирования страницу или запись и вставьте туда скопированный шорткод. Шорткод состоит из двух шорткодов, большого и не большого. Между шорткодами стоит содержание по умолчанию, удалите его и вставьте своё содержание, изображение или текст. Шорткод для удобства нужно разделить на две части, чтобы они располагались в разных строках. В большом шорткоде вы можете указать ID своего видео с ютуба, которое будет проигрываться в видео подсказке при наведении.

 

шорткод видео превью

 

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

 

info-effect.ru
Добавить комментарий для Алексей Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Алексей

    А как сделать, чтобы на витрине товаров при наведении на изображение товара проигрывалось видео в этом же окошке. Как на сайте robo3/ru. Заранее спасибо.

    Ответить
    1. Admin автор

      Здравствуйте. Они либо шаблон такой купили, где уже была встроена данная функция, либо разработчик делал. Именно такого плагина я не встречал. Знаю плагин, где можно добавить видео вместо товара. Но, видео отображается только в карточке товара. Плагин называется WooCommerce Featured Video.

      Ответить
  2. Алексей

    Можно еще вопрос? В моем шаблоне Electro товар на витрине выводится в 2 строки. Ни одно название не влазит. Как можно вывести название в 3 строки? (как на том же robo3/ru Плюс возможно немного уменьшить его шрифт. Ect все облазил. Не могу найти.

    Ответить
    1. Admin автор

      Да, можно. Вам может помочь плагин SiteOrigin CSS. Я так понимаю, там нужно расширить отступы с помощью стилей margin или padding. В общем надо экспериментировать. Стили CSS можно изменить без плагина, здесь я показывал как. Обратите внимание, все стили я рекомендую переносить сюда: Внешний вид – Настроить – Дополнительные стили. Прям туда копировать. Так они быстрее грузятся и корректно. Если их оставлять на странице плагина SiteOrigin CSS, на сайте они будут моргать.

      Ответить
  3. Алексей

    Огромное спасибо Вам! Просто спасли меня.

    Ответить