Подтвердить что ты не робот

Twitter Bootstrap Модальная остановка видео Youtube

Я очень новичок в javascript и пытаюсь использовать загрузочный лоток Twitter, чтобы быстро и быстро найти хороший сайт. Я знаю, что это имеет какое-то отношение к jquery, но я не уверен, как остановить мое видео, когда я нажимаю кнопку закрытия или значок закрытия.

Может кто-нибудь объяснить, как я могу заставить мое видео перестать играть, потому что даже когда я закрываю окно, я все еще слышу его в фоновом режиме.

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
4b9b3361

ОТВЕТЫ

Ответ 1

Есть хороший правильный способ сделать это - см. комментарии в одобренном ответе на этот пост.

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

Этот фрагмент "обновляет" src встроенного iframe, заставляя его перезагружать:

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});

Ответ 2

Я знаю, что я опаздываю на 2+ года, но с тех пор несколько вещей изменились, а B3 - новый способ сделать это из коробки:

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Получайте удовольствие от Bootstrap!

Ответ 3

Если у кого-то еще есть проблема, попробуйте это, это сработало для меня:

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

        $(this).on('click', function(){

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});

Ответ 4

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

Используйте .html, чтобы загрузить iFrame с вашим видео в модальное тело, когда модальный показан, а затем замените модальное тело ничем, когда он будет скрыт.

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

Вот пример jsfiddle:

http://jsfiddle.net/WrrM3/87/

Ответ 5

Здесь я обобщаю ответ @guillesalazar.

Это будет reset любой iFrame в любом модальном бутстрапе (когда модаль закрыт):

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

Добавьте это в свой макет, и вы настроены.

UPDATE: Код, измененный для модалов с несколькими iFrames.

Ответ 6

Сначала вы должны удалить iframe src, а затем снова настроить его.

Итак, мой рабочий ответ:

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

Октябрь 2014. Для Bootstrap 3.

Ответ 7

Вот мое решение, оно решает следующие вызовы событий бутстрапа:

  • Автовоспроизведение фильма при показе модального
  • Остановить фильм, когда модальный скрыт

HTML карусель внутри модального, первый активный элемент - это видео iframe

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript автовоспроизведение при отображении модального, затем reset URL-адреса и повторное применение к iframe src

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});

Ответ 8

Был модальный со многими видео. Обновлен код @guillesalazar, чтобы закрыть несколько видеороликов в модальном режиме.

$("#myModal").on('hidden.bs.modal', function (e) {
            $("#myModal iframe").each(function () {
                $(this).attr("src", '');
            });
        });

Ответ 9

Это делает это отлично:

$("#myModal").on("hidden.bs.modal", function(t) {
   var o = $(t.target).find("iframe");
   o.each(function(t, o) {
      $(o).attr("src", $(o).attr("src"))
   });
});

Если вы хотите, чтобы он начинался, когда модальный режим открывает/останавливает, когда он закрывается, используйте этот код:

Но не забудьте добавить enablejsapi=1 в свой src, например:

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();

Ответ 10

Я использовал комбинацию Ruslanas Balčiūnas и Натан Макфарланд ответил на код что-то, что сработало для меня,

$('#myModal').on('hide',function(){
   $('.modal-body iframe').attr('src','');
});

Таким образом, в основном это означает, что атрибут src iframe ничего не срабатывает при срабатывании закрытия модального события. Коротко и ясно.

Ответ 11

Мое решение, которое работает для Bootstrap 3 и современного формата YouTube embed, выглядит следующим образом.

Предполагая, что ваше видео встроено в стандартный Bootstrap 3 Modal с id="#video-modal", этот простой бит Javascript выполнит эту работу.

$(document).ready(function(){
  $("#video-modal").on('hide.bs.modal', function(evt){
    var player = $(evt.target).find('iframe'),
        vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  });
});

Я видел предлагаемые решения этой проблемы, связанные с использованием YouTube API, но если ваш сайт не является сайтом https, или ваше видео встраивается в современный формат, рекомендованный YouTube, или если у вас есть no-cookies, тогда эти решения не работают, и вместо вашего видео вы получаете эффект "Телевизор в мертвый канал".

Я тестировал выше в каждом браузере, на котором я мог положиться, и он работает очень надежно.

Ответ 12

Развернувшись на Guille, ответьте выше, это функция возврата, которая будет работать с Bootstrap 3, последней версией youtube с 14 августа, а работает для нескольких видео/модалов на одной странице,

$(".modal").on('hidden.bs.modal', function(e) {
    $iframe = $(this).find( "iframe" );
    $iframe.attr("src", $iframe.attr("src"));
});

Ответ 13

Гораздо более простой способ, чем все эти ответы - просто заменить весь SRC. Это работает для всех модалов, и вы можете настроить класс iframe по мере необходимости.

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });

Ответ 14

$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})

Ответ 15

@guillesalazaar ответ был только 1-й половиной моего исправления, поэтому я чувствовал себя вынужденным поделиться своей ситуацией, если это поможет кому-то в будущем. У меня тоже есть встроенное видео youtube, но я установил, чтобы я играл автоматически, когда кадр загружается с помощью autoplay=1. Чтобы обойти проблему автовоспроизведения при загрузке страницы, у меня есть URL-адрес YouTube, который хранится в переменной, которая устанавливает источник iframe с помощью обработчика щелчка. Чтобы решить эту проблему, я просто удалил ссылку источника атрибута:

Мой URL-адрес для запуска модального окна:

   <div id="movieClick" class="text-center winner"> 
<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">
    </div>

Мои скрытые модальные оконные divs:

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe>

      </div>
</div>

</div>
</div>

Мой JS:

$("#movieClick").click(function(){
var theLink  = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0";
document.getElementById("onscreen").src = theLink;
});


// really annoying to play in the Background...this disables the link
$("#movie").on('hidden.bs.modal', function (e) {
    $("#movie iframe").attr("src", '');
});

Ответ 16

 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});

Ответ 17

Мое решение для 2 или более видео на Youtube с использованием атрибута HTML data- *. Видео автоматически воспроизводится и останавливается, когда модал открывается и закрывается.

<button data-url="https://www.youtube.com/embed/C0DPdy98e4c" data-toggle="modal" data-target="#mymodal">Video 1</button>
<button data-url="https://www.youtube.com/embed/ScMzIvxBSi4" data-toggle="modal" data-target="#mymodal">Video 2</button>

<!-- Modal -->
<div id="mymodal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

$('.modal').on('show.bs.modal', function (event) {
  $(this).find('iframe').attr("src", $(event.relatedTarget).data('url') );
});

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find('iframe').attr("src", "");
});

Вот демоверсия Codepen: https://codepen.io/danielblazquez/pen/oOxRJq

Ответ 18

Для угловых или динамических HTML или если у нас есть несколько iframes, используйте как показано ниже

$("#myModal").on('hidden.bs.modal', function (e) {
  $("#myModal iframe").each(function(){
    $(this).attr("src", $(this).attr("src"));
  });
});