В шаблоне — конструкторе AB-Inspiration, как вы знаете, все картинки при клике открываются в большем размере во всплывающем окне (fancybox popup). С версии 6.0.20 есть возможность, вставить видео во всплывающее окно вместо увеличенного изображения.
Я не стала широко афишировать эту возможность, поскольку здесь нужно будет немного подредактировать код. Но я уверена, раз вы читаете мой блог с техническими описаниями шаблона, легко с этим справитесь 
При клике на изображение всплывает окно popup с видео
Итак, приступим.
1. Вставьте в текст изображение
2. В режиме «Визуально» кликните по изображению и нажмите на значок «карандаш» «Изменить»
3. Выберите из списка «Ссылка» — Произвольный URL
4. В поле URL вставьте ссылку embed на видео (Youtube или vimeo). Обратите внимание, ссылка должна быть именно embed, не просто ссылка на видео. Как получить ссылку embed, смотрите ниже.
5. Удалите все из поля «Отношение», оно должно быть пустым
6. Спуститесь ниже и в поле CSS-класс ссылки напишите слово fancybox
7. Нажмите на кнопку «Обновить»
8. Переключитесь в режим «Текст»
9. Найдите код изображения с ссылкой и в ссылке вставьте строчку data-fancybox-type=»iframe».
У вас должно получиться следующее:
<a class="fancybox" href="Здесь будет ссылка на видео" data-fancybox-type="iframe">
В итоге код изображения с ссылкой должен выглядеть так:
<a class="fancybox" href="Здесь ссылка на видео" data-fancybox-type="iframe"><img class="alignleft wp-image-1693 size-full" src="Ссылка на изображение" alt="lambo3" width="166" height="153" /></a>
А теперь давайте протестируем. Сохраните или опубликуйте статью. Откройте статью на блоге и кликните по изображению. Если все сделали правильно, должен всплыть попап, а в попапе появится видео.
Как получить embed ссылку на видео в youtube
Как я сказала ранее, ссылка на видео должна быть embed.
Итак, если ваше видео на youtube, сделайте следующее:
1. Откройте видео для просмотра
2. Спуститесь ниже и нажмите «Поделиться», перейдите во вкладку HTML-код
3. Скопируйте в коде ссылку на видео, без кавычек.
Ссылка должна выглядеть так:
https://youtube.com/watch?v=ID%D0%92%D0%B0%D1%88%D0%B5%D0%B3%D0%BE%D0%92%D0%B8%D0%B4%D0%B5%D0%BE
Как получить embed ссылку на видео в vimeo
Если у вас видео размещено на Vimeo, то сделайте следующее.
1. Откройте видео
2. Справа на видео нажмите на значок «самолет» -Share
3. Во всплывшем конке скопируйте код Embed
4. Вставьте его в любом редакторе
5. Скопируйте только ссылку на видео
Ссылка должна выглядеть так:
https://player.vimeo.com/video/IDВашегоВидео
На этом все. Если у вас есть вопросы по использованию всплывающего окна Fancybox в шаблоне — конструкторе AB-Inspiration, не стесняйтесь, задавайте в комментариях.
Создать сайт для заработка с нами — легко и быстро!
За помощью обращайтесь в нашу службу поддержки 24/7
Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
а также, хостинг Beget:
Средняя оценка: 4 из 5
Супер! Спасибо за новые возможности шаблона, милая Анфисочка!!! Ты радуешь каждый раз и я каждый раз благодарю за эти подарки и говорю спасибо за такой замечательный шаблон и твою поддержку и руководство.
Вот бы еще и всплывающее окно, когда человек захочет закрыть страничку! Это было бы бомбой! Пусть даже и платной, но это повышает конверсию, как я читала. Как вам такая мысль?
Елена, спасибо большое за теплые слова. Всплывающее окно можно приобрести либо у Кирилла (оно у нас в шаблоне интегрировано), либо установить popup domination. Я думала создать свой попап, но их реально так много в интернет, что повторять не хочется. Можно взять стороннюю разработку
Супер!!! Спасибо, Анфиса, за такую шикарную фишку! Ну, друзья конкуренты, завидуйте!!!
Мне понравилось.Всё сделал как учили.Работает.Только видео с You Tube как сделать,что бы не во весь экран?
Алексей, все должно получиться. Может вы не ту ссылку на видео взяли? Ее нужно не в адресной строке копировать, а в коде embed. Посмотрите в тексте я пишу об этом.