Останавливаем/запускаем видео с YouTube на вашем сайте на jQuery+JavaScript

Почти каждый день я решаю интересные задачи, связанные с сайтостроением. И не так давно я задался вопросом (увидев на одном сайте схожий функционал), а как же программно (своим скриптом) остановить или запустить ролик с видеохостинга YouTube на своем сайте.

Мне нужно было запускать ролик сразу при открытии popup-окна, но вам я покажу пример с привязкой событий к ссылкам.

По желанию, используемые методы вы можете использовать и в своих задумках.

Итак, начнем с одного из самых главных – встраивания видео на ваш сайт. Стандартно видеохостинг предлагает вам следующий код для встраивания:

<div id="my_video">

	<iframe width="560" height="315" src="https://www.youtube.com/embed/bhXZiG4bsjA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

Здесь мы оставляем все как есть, за исключением ссылки – в ее конец вы добавляете:

?enablejsapi=1

И в итоге у вас должно получиться следующее:

<div id="my_video">

	<iframe width="560" height="315" src="https://www.youtube.com/embed/bhXZiG4bsjA?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

А далее напишем наши скрипты для обработки со ссылками для запуска и остановки видео. Код ссылок:

<a href="javascript: void(0);" id="play_video">Запустить видео</a>
<a href="javascript: void(0);" id="pause_video">Остановить видео</a>

Скрипт обработки:

<script>

	$(document).ready(function() {
    
		var my_video = document.getElementById("my_video");
		var my_video = my_video.getElementsByTagName("iframe")[0].contentWindow;
      
		$("#play_video").on("click", function() {
		
			my_video.postMessage('{"event": "command", "func": "playVideo", "args": ""}', "*");
			
		});
    
		$("#pause_video").on("click", function() {
		
			my_video.postMessage('{"event": "command", "func": "pauseVideo", "args": ""}', "*");
			
		});

	});
	
</script>

Поскольку мы используем jQuery, то не забываем подключить соответствующую библиотеку в секцию HEAD. Ну вот вроде и все, при нажатии на одну из кнопок управления видео будет происходить соответствующее действие с ним.

Всем удачи и до новых встреч!