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"Отключить автофокусировку на форму во всплывающем окне
jQuery('[data-fancybox=""]').fancybox({
autoFocus: false
});
