/ Scripts & jquery / Fancybox для контента

Fancybox для контента

19.05.2020

350

Fancybox — отличный инструмент не только для лайтбокса и галереи изображений. С помощью данного плагина можно быстро и просто создавать модальные окна для контента. В данном направлении есть различные интересные возможности, рассмотрим их.

Как подключать Fancybox описано в этой статье.

Создать простое модальное окно

<a data-fancybox data-src="#hidden-content" href="javascript:;">Политика конфиденциальности</a>

<div style="display: none; max-width: 1024px;" id="hidden-content">
	<h2>Политика конфиденциальности</h2>
	<p>Текст политики</p>
	<p><button data-fancybox-close class="button">Закрыть</button></p>
</div>

Если вставить в во всплывающее окно видео, то оно автоматически будет воспроизводиться при открытии:

<div style="display: none; max-width: 1024px;" id="hidden-video">
	<video controls="controls"><source src="/wp-content/uploads/2019/10/Video.mp4" type="video/mp4"></video>
</div>

Но это только для тега video. Если вставлять видео с Youtube во iframe, то видео автоматически воспроизводится не будет. Для автовозпроизведения нужно добавить параметр (?autoplay=1) к url видео.

было:
<iframe width="800" height="315" src="https://www.youtube.com/embed/r43_fsDQEIo"
стало:
<iframe width="800" height="315" src="https://www.youtube.com/embed/r43_fsDQEIo?autoplay=1"

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Fancybox для контента
Создание metabox’а
Рекомендации для васСоздание metabox’аOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.