it-blog.club
fancybox iframe

fancybox iframe

Если перед вами встала задача вывести фрейм в фенсибоксе, то можете воспользоваться примером ниже.

И так. Допустим вам необходимо вставить на сайт видео с внешнего ресурса (Прим: youtube или vimeo), при этом используя fancybox. Кстати фенсибокс должен открываться по ссылке.


<a class="js-fancybox" href="">Смотреть видео</a>

Для зачала вам необходимо скачать и подключить сам плагин вместе с CSS файлом.


<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css">

Далее нашей ссылке добавим какой-либо класс для дальнейшего определения. Например js-fancybox

Далее работаем в script.js ну или как у вас называется скриптовый файл.


$('a.js-fancybox').fancybox(
{
type: 'iframe',
iframe: {
scrolling: 'auto',
preload: true
}
});

Надеюсь что JS у вас подключается в фотере, чтобы данный скрипт разумеется отработал.

Далее получаем наш фрейм с YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/5pK53JIdwK4&amp;quot; frameborder="0" allowfullscreen></iframe>

Из этого фрейма нам нужно только src. Т.е. https://www.youtube.com/embed/5pK53JIdwK4

Ну и далее наша ссылка с открывающимся фенсибоксом и фреймом внутри:


<a class="js-fancybox" href='//www.youtube.com/embed/5pK53JIdwK4'>Смотреть видео</a>

Тоже самое делаете для вставки видео с vimeo. Вы так же получаете код для вставки и просто забираете из него саму ссылку


it-blog.club 1049
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать