Как сделать видео во всплывающем окне в шаблоне AB-Inspiration 6.0

  Автор:
  1667
видео во всплывающем окне

В шаблоне AB-Inspiration, как вы знаете, все картинки при клике открываются в большем размере во всплывающем окне (fancybox popup). С версии 6.0.20 есть возможность, вставить видео во всплывающее окно вместо увеличенного изображения.

Я не стала широко афишировать эту возможность, поскольку здесь нужно будет немного подредактировать код. Но я уверена, раз вы читаете мой блог с техническими описаниями шаблона, легко с этим справитесь :)

При клике на изображение всплывает окно popup с видео

Итак приступим.

1. Вставьте в текст изображение

facnybox1

facnybox2

2. В режиме «Визуально» кликните по изображению и нажмите на значок «карандаш» «Изменить»

facnybox3

3. Выберите из списка «Ссылка» — Произвольный URL
4. В поле URL вставьте ссылку embed на видео (Youtube или vimeo). Обратите внимание, ссылка должна быть именно embed, не просто ссылка на видео. Как получить ссылку embed, смотрите ниже.
5. Удалите все из поля «Отношение», оно должно быть пустым
6. Спуститесь ниже и в поле CSS-класс ссылки напишите слово fancybox
7. Нажмите на кнопку «Обновить»

facnybox11

8. Переключитесь в режим «Текст»
9. Найдите код изображения с ссылкой и в ссылке вставьте строчку data-fancybox-type=»iframe».
У вас должно получиться следующее:

 <a class="fancybox" href="Здесь будет ссылка на видео" data-fancybox-type="iframe"> 

facnybox5

В итоге код изображения с ссылкой должен выглядеть так:


<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. Скопируйте в коде ссылку на видео, без кавычек.

facnybox7

Ссылка должна выглядеть так:

https://youtube.com/watch?v=IDВашегоВидео

Как получить embed ссылку на видео в vimeo

Если у вас видео размещено на Vimeo, то сделайте следнующее.

1. Откройте видео
2. Справа на видео нажмите на значок «самолет» -Share

facnybox8

3. Во всплывшем конке скопируйте код Embed

facnybox9

4. Вставьте его в любом редакторе
5. Скопируйте только ссылку на видео

facnybox10

Ссылка должна выглядеть так:

https://player.vimeo.com/video/IDВашегоВидео

На этом все. Если у вас есть вопросы по использованию всплывающего окна Fancybox в шаблоне AB-Inspiration 6.0, не стесняйтесь, задавайте в комментариях.

Как сделать видео во всплывающем окне в шаблоне AB-Inspiration 6.0

   4 голоса
Средняя оценка: 4 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Комментарии на блоге
5 комментариев
  1. Супер! Спасибо за новые возможности шаблона, милая Анфисочка!!! Ты радуешь каждый раз и я каждый раз благодарю за эти подарки и говорю спасибо за такой замечательный шаблон и твою поддержку и руководство.
    Вот бы еще и всплывающее окно, когда человек захочет закрыть страничку! Это было бы бомбой! Пусть даже и платной, но это повышает конверсию, как я читала. Как вам такая мысль?

    • Елена, спасибо большое за теплые слова. Всплывающее окно можно приобрести либо у Кирилла (оно у нас в шаблоне интегрировано), либо установить popup domination. Я думала создать свой попап, но их реально так много в интернет, что повторять не хочется. Можно взять стороннюю разработку :)

  2. Супер!!! Спасибо, Анфиса, за такую шикарную фишку! Ну, друзья конкуренты, завидуйте!!! :P

  3. Мне понравилось.Всё сделал как учили.Работает.Только видео с You Tube как сделать,что бы не во весь экран?

    • Алексей, все должно получиться. Может вы не ту ссылку на видео взяли? Ее нужно не в адресной строке копировать, а в коде embed. Посмотрите в тексте я пишу об этом.

Комментарии в Фейсбук
Комментарии в Вконтакте