Как сделать всплывающее окно с 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