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

Шевченко Вячеслав

5 лет назад

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

Видео урок

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

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

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

<!DOCTYPE html>
<html>
<head>
     <title>Видео в окне</title>
</head>
<body>
 
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
        <title>Видео в окне</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <!-- Add jQuery library -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <!-- Add fancyBox -->
        <link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="jquery.fancybox.js"></script>
</head>
<body>

</body>
</html>

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

<div class="container">
     <div class="youtube">
        <a href='' target="_blank" class="popupbox-video fancybox.iframe" rel="group">
           <img src="img/preview.jpg">
        </a>
    </div>
</div>

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

.container {
     width: 100%;
}
.youtube {
     width: 620px;
     margin: 0 auto;
}

.youtube a > img{
     max-width: 100%;
     height: auto;
}

.youtube a, .youtube iframe {
  padding: 5px;
  border: solid 1px #ccc;
  box-shadow: 0 0 5px #ccc;
  display: block;
  position: relative;
}

.youtube a:after {
     width: 64px;
  height: 64px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
  background: url(../img/player_play.png) no-repeat;
  content: '';
  opacity: 0.8;
}

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

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

https://www.youtube.com/v/EnZarUPHX1w?enablejsapi=1&theme=light&showinfo=0&vq=hd720&border=0&autoplay=1

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

<script type="text/javascript">
        jQuery(document).ready(function() {
                jQuery("a.popupbox-video").fancybox({
                   type:'swf',
                   allowfullscreen: 'true'
                });
        });
</script>

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