Видео в модальном окне при помощи fancybox подробная инструкция

Здравствуйте дорогие читатели, недавно я опубликовал пост на сайте на тему форма обратной связи, в этой статье я разместил свое первое видео. В тексте оно смотрелось не очень хорошо, и мне захотелось это исправить. Я принял решение разместить видео в модальном окне, а превью к видео сделать картинкой, она же является ссылкой на видео. В этой статье мы подробно разберем как реализовать это с помощью плагина fancybox.

Видео урок

Исходник
Демо

Создаем fancybox c видео в модальном окне.

Мы рассмотрим наш урок на простом примере, который вы с легкостью сможете применить на своем проекте. Для начала создадим простую html страницу в каталоге, в этом каталоге создадим папки img, fancybox, css.

Далее нужно скачать сам плагин, я использовал версию 2.1.5. После загрузки, содержимое папки source переместите в нашу папку fancybox. Теперь можно подключать плагин на страницу.

Создаем html разметку на странице

Контейнер с классом youtube отвечает за оформление превью видео. В ссылку нужно обязательно добавить класс fancybox.iframe без него не будет правильно работать видео с youtube в fancybox. В img указываем путь к картинке привью. И добавим немного css стилей.

В атрибут href ссылки, укажем путь к видео на ютуб. Вместе с линком добавим несколько параметров для плеера.

  1. theme — цветовая схема плеера
  2. showinfo — информация о видео, т.к. заголовок и т.д.
  3. vq — в каком разрешении запускать видео
  4. border — рамка
  5. autoplay — автоматическое воспроизведение при загрузке страницы

Остался завершающий шаг инициализировать fancybox для видео. Вставим маленький скрипт перед закрывающим тегом body

Если у вас возникли вопросы задавайте их в комментариях, или пишите на почту. В следующей статье мы разберем создание галереи в виде плитки, чтобы не пропустить пост подписывайтесь на обновления в группе в вк. Пока!

comments powered by HyperComments