Видео с YouTube в модальном окне
Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

Видео с YouTube в модальном окне


Сегодня разберём скрипт "Просмотр видео с youtube в модальным окне". Демонстрацию можете посмотреть на моём сайте справа "Последние видео". Сделан он из предыдущего скрипта "Нашли ошибку ? - нажимай Ctrl + Q". На самом деле обожаю модальные окна на сайтах. Данный скрипт может быть применён для блогов, интернет магазинов, порталов, и вообщем сами придумайте где.

В начале нам необходимо сделать превью (иконку) изображения для нашего видео c youtube. По ней мы будем кликать - и будет всплывать модальное окно. Здесь вы можете посмотреть, как взять превью видео прямо с сайта youtube. Мне подходит больше всего размер 120*90.

 <img src='http://img.youtube.com/vi/cFvwjQzQcdo/3.jpg' onclick='show_video();' class='img_video'/>
 

Сразу присваиваем класс img_video для того, чтобы курсор превратить в руку:
.img_video {
	cursor: pointer;
	cursor: hand; /* Для старых браузеров */
}
 

Функция show_video() будет вызываться при клике по нашей картинке и производить основное действо.

Вставляем в HTML код перед закрывающимся тегом body. Это и есть само модальное окно и видео с youtube

<div id="modal_form"><!-- Сaмo oкнo --> 
      <span class="modal_close">x</span> <!-- Кнoпкa зaкрыть --> 
      <!-- Тут любoе сoдержимoе -->
		<center>
		<iframe width="650" height="488" src="https://www.youtube.com/embed/cFvwjQzQcdo?enablejsapi=1" frameborder="0" allowfullscreen id='v1'></iframe>
		</center>
</div>

<div id="overlay">
</div><!-- Пoдлoжкa -->
 

В конце адреса видео мы прописали ?enablejsapi=1. Это позволяет использовать YOUTUBE API в нашем скрипте, благодаря чему, мы сможем управлять плеером youtube с помощью специальных команд (включить видео, оставноить видео и т.д.). Также помечаем видео с помощью id.

CSS стили для модального окна:

#modal_form {
	width: 700px; 
	height: 550px; /* Рaзмеры дoлжны быть фиксирoвaны */
	position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
	top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
	left: 50%; /* пoлoвинa экрaнa слевa */
	margin-top: -275px;
	margin-left: -350px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
	display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
	opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
	z-index: 9999; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
	padding: 20px 10px;
}

/* Пoдлoжкa */
#overlay {
	z-index:9998; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
	position:fixed; /* всегдa перекрывaет весь сaйт */
	background-color:#000; /* чернaя */
	opacity:0.98; /* нo немнoгo прoзрaчнa */
	-moz-opacity:0.98; /* фикс прозрачности для старых браузеров */
	filter:alpha(opacity=80);
	width:100%; 
	height:100%; /* рaзмерoм вo весь экрaн */
	top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
	left:0;
	cursor:pointer;
	display:none; /* в oбычнoм сoстoянии её нет) */
}

/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
	color:white;
}
 

Здесь уже блок div явлется прозрачным!


JavaScript модального окна (опять используем библиотеку jquery):


function show_video()
{

	$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
		 	function(){ // пoсле выпoлнения предъидущей aнимaции
			
				$('#modal_form') 
					.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;	
					.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
				
				document.getElementById('v1').contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
					
	});
	
	
	/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
	$('.modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
			
			$('#modal_form')
			.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
				function(){ // пoсле aнимaции
					$(this).css('display', 'none'); // делaем ему display: none;
					$('#overlay').fadeOut(400); // скрывaем пoдлoжку
				}
			); 
			
			document.getElementById('v1').contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
		
	});
} 

Команда Youtube API запускает видео автоматически

 document.getElementById('v1').contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
 

Команда Youtube API останавливет видео автоматически

 document.getElementById('v1').contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
 

Вот и всё! Если вы захотите использовать несколько видео - можно сделать несколько болков div c разными видео, а в функцию передавать id и с помощью этого id запускать нужный блок.


Скачать скрипт видео с YouTube в модальном окне

Счастливого программирования!


26-06-2016 в 16:39:54





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

Похожая статья:

Кнопка "вверх" для сайта

Хотите кнопку вверх для своего сайта как у меня ? Тогда эта статья для...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 0


Комментарии:

Спасибо за статью, но не понятно как делать много видео
Иван 31-01-2018 в 11:57:23

Передаём параметр в функцию для каждой картинки: <img src='' onclick='show_video("v1");'/> <img src='' onclick='show_video("v2");'/> Дивы тогда будут: <div id="modal_form2">...</div> <div id="modal_form3">...</div> А функция будет выглядеть примерно так: http://code-enjoy.ru/js/scripts.js
Калужский Александр 31-01-2018 в 21:29:31



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота:

Ответ:


Последние
видео:



Шейкер-сортировка (С#)
ОГЭ по информатике. Задание 18


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy