Здравствуйте дорогие читатели, недавно я опубликовал пост на сайте на тему форма обратной связи, в этой статье я разместил свое первое видео. В тексте оно смотрелось не очень хорошо, и мне захотелось это исправить. Я принял решение разместить видео в модальном окне, а превью к видео сделать картинкой, она же является ссылкой на видео. В этой статье мы подробно разберем как реализовать это с помощью плагина fancybox.
Видео урок
Создаем fancybox c видео в модальном окне.
Мы рассмотрим наш урок на простом примере, который вы с легкостью сможете применить на своем проекте. Для начала создадим простую html страницу в каталоге, в этом каталоге создадим папки img, fancybox, css.
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<html>
<head>
<title>Видео в окне</title>
</head>
<body>
</body>
</html>
|
Далее нужно скачать сам плагин, я использовал версию 2.1.5. После загрузки, содержимое папки source переместите в нашу папку fancybox. Теперь можно подключать плагин на страницу.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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 разметку на странице
|
1
2
3
4
5
6
7
|
<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 стилей.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.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 — автоматическое воспроизведение при загрузке страницы
|
1
|
https://www.youtube.com/v/EnZarUPHX1w?enablejsapi=1&theme=light&showinfo=0&vq=hd720&border=0&autoplay=1
|
Остался завершающий шаг инициализировать fancybox для видео. Вставим маленький скрипт перед закрывающим тегом body
|
1
2
3
4
5
6
7
8
|
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a.popupbox-video").fancybox({
type:'swf',
allowfullscreen: 'true'
});
});
</script>
|