Запустить видео youtube по клику — jQuery

Запустить видео youtube по клику — jQuery

Часто ли вам приходится работать с видео из популярного видео хостинга - youtube? Если приходится - вы знаете, что этот сервис позволяет без труда вставить видео к себе на сайт. Причем у них достаточно хорошее API, которое позволяет сделать неплохие настройки плеера. Но недавно столкнулся с нетривиальной задачей - как запустить видео по клику на произвольную кнопку или элемент? Ведь передать клик фрейму с помощью триггера не получится. Решение было найдено!


Все оказалось не так уж и сложно. Достаточно написать простенький скрипт на jQuery и все будет работать. Но давайте разберемся по порядку. Рассмотрим живой пример. Возьмем произвольное видео из ТОП-а на youtube и вставим его на сайт. Мне попалось вот это. Заходим на страницу видео, внизу нажимаем поделиться и копируем полученный html-код:

<iframe width="560" height="315" src="https://www.youtube.com/embed/nRTJd91G04Q" frameborder="0" allowfullscreen></iframe>

Теперь внимание! Нам нужно в конце ссылки добавить параметры ?rel=0&showinfo=0 - чтобы не было инфы перед запуском и чтобы не воспроизводились другие после завершения. Если вы не хотите этого добавлять, то добавьте хотя бы знак вопроса в конце, потому что иначе работать оно не будет. Добавим также id="video" для идентификации нашего плеера. Полученный код:

<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/nRTJd91G04Q?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Теперь создадим самую простую кнопку, по нажатию на которую будем стартовать наше видео:

<div class="button">Запустить видео</div>

Добавим чуть стилей:

.button {
	margin:50px;
	height:20px;
	background:tomato;
	color:#fff;
	padding:20px;
	cursor:pointer;
}

И теперь самое важное - сам скрипт, который будет делать всю работу:

$(document).on('click', '.button', function() {
	var $video = $('#video'),
		src = $video.attr('src');
 
	$video.attr('src', src + '&autoplay=1');
});

Работает он следующим образом: находит плеер по id, запоминает атрибут src - который отвечает за адрес. И по нажатию на кнопку добавляет в конец адреса параметр &autoplay=1, который позволяет сразу запустить видео. Вот и все:)

Полный код страницы:

<!DOCTYPE html>
<html>
<head>
<title>Запустить видео youtube по клику - jQuery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
	.button {
		margin:50px;
		height:20px;
		background:tomato;
		color:#fff;
		padding:20px;
		cursor:pointer;
	}
</style>
<script>
$(document).on('click', '.button', function() {
	var $video = $('#video'),
		src = $video.attr('src');
 
	$video.attr('src', src + '&autoplay=1');
});
</script>
</head>
<body>
	<div class="button">Запустить видео</div>
	<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/nRTJd91G04Q?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>
 

26.03.17
Для просмотра сайта обновите браузер.