Запустить видео 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>