PHP + jQuery / Скрипты

Как сделать всплывающее окно с Youtube видео.

В первой статье мы писали с вами скрипт всплывающего окна на PHP + jQuery + в архиве был файлик позволяющий сохранять данные в базу MySQL. В этом уроке я хочу немного дополнить наш исходный код и добавить всплывающую форму с видео блоком.


  • Видео будем подгружать из YouTube.
  • Окно с видео-блоком будет открываться и автовоспроизводится) что бы пользователь не делал лишних кликов и сразу смотрел видео.
  • При закрытии окна, видео будет останавливаться и удалятся с блока.

Я не буду дублировать предыдущий урок, только выложу новые куски кода на сайте. А архив с исходниками и доработанными стилями вы как всегда сможете скачать по ссылке в конце статьи. Поехали:

//========================================================================== popup
$(function() {
    //функция вызова всплывающего окна с видео-блоком
	 $('#video_btn').on('click', function() {
        $('#popup_video').fadeIn();
		//добавляем видео в блок с настройками автовоспроизведения
		$('#popup_video').append('');
            $('#popup_video_block').append('');
            q_width = $('#popup_video').outerWidth()/-2;
            q_height = $('#popup_video').outerHeight()/-2;
            $('#popup_video').css({
                'margin-left': q_width,
                'margin-top': q_height
            });
            $('body').append('
'); $('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn(); }); $('body').on('click', '#fade, #popup_video_close', function() { $('#fade , #popup').fadeOut(function() { $('#popup_video_block').empty(); $('#popup_video').fadeOut(); $('#popup_video_close').remove(); $('#fade').remove(); }); }); });

Ну а html код формы самый простой из двух блоков:


Надеюсь этот элегантный вариант всплывающего видео блока поможет в одном из ваших проектов. Спасибо за внимание. Скачать исходники всплывающее окно с видео Youtube

5566 Просмотров Комментариев: 2

Eugene Москаленко

Ответить

модальное окно у тебе г*вно используй magnific popup

Сергей

Ответить

Хороший пример, но не работает на jQuery v1.11.1

« Предыдущая статьяФорма обратной связи PHP + jQuery Следующая статья »Google Maps API - выводим карту на сайт с указанием адреса а не координат