Автоматический запуск и остановка видео YouTube с загрузкой Twitter

Question

Автоматический запуск и остановка видео YouTube с загрузкой Twitter

Я использую модальное окно Twitter Bootstrap для всплывающего видео lightbox, когда пользователь нажимает на изображение миниатюры видео (Пример: http://seniorshomecare.harmonyapp.com/how-we-can-help , Используйте пароль: shc). Если возможно, я хотел бы, чтобы видео автоматически воспроизводилось, когда lightbox всплывает, и автоматически останавливалось, когда пользователь закрывает lightbox. Есть несколько подобных вопросов, но ни один из них не помог мне сильно.

Любая помощь будет весьма признательна. Спасибо!

750 3

jQuery youtube twitter-bootstrap modal-dialog

3 ответов:

Comments

Ничего не найдено.

baptme · Accepted Answer · 2012-07-25 19:07:51

Добавьте &autoplay=1 в url-адрес видео на youtube.

Http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821

Редактировать:

Вы можете использовать событие show для запуска функции, которая добавляет код в модальный
$('#myModal').on('show', function () {
  $('div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});
Демо-версия : http://jsfiddle.net/baptme/WrrM3/

Решение не завершено, вам придется удалить iframe при закрытии модального.

WeisbergWeb · Accepted Answer · 2013-01-24 02:54:06

Это удалит iFrame, когда модальный будет закрыт:
$('#myModal').on('hide', function () {
$('div.modal-body').html('&nbsp;');  
});
Http://jsfiddle.net/WrrM3/82/

josephap · Accepted Answer · 2013-04-30 01:14:19

Вышеприведенные ответы прекрасно работают, Если у вас на странице есть только один модальный . Если у вас есть несколько, ваше видео будет загружено во все ваши другие модалы и начнет воспроизводиться одновременно в некоторых браузерах.

Чтобы исправить эту проблему, будьте более конкретны с javascript, который вставляет и удаляет видео, добавляя #myModal Перед div.modal-body, следующим образом:
$('#myModal').on('show', function () {
  $('#myModal div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

$('#myModal').on('hide', function () {
  $('#myModal div.modal-body').html('&nbsp;');  
});