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

Question

Я очень новичок в 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>

Answer 1

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

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

Этот фрагмент "обновляет" источник встроенного iframe, вызывая его перезагрузку:

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

Answer 2

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

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

Веселитесь вместе с Bootstrap!

Answer 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);

        });
    });
});

Answer 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/

Answer 5

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

Это сбросит любой 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"));
    });
  });
});

Добавьте это к вашему макету, и все готово.

ОБНОВЛЕНИЕ: Код, модифицированный для модальностей с несколькими фреймами.

Answer 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.

Answer 7

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

1. Автозапуск фильма при показе модального
2. Остановить фильм, когда модал скрыт

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 при отображении модальных, затем сбросьте 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;
});

Answer 8

Гораздо более простой способ, чем все эти ответы, - просто заменить весь 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;
  });

Answer 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();

Answer 10

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

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

Answer 11

Перезагрузите любой iframe в модальном режиме начальной загрузки. hide.bs.modalмероприятие.

The setTimeoutдобавлена ​​задержка для исправления рендеринга iframe после srcперезагрузить.

      $('.modal').on('hidden.bs.modal', function (event){
    let iframes = event.target.getElementsByTagName('iframe');
    for (let i = 0; i < iframes.length; i++) {
        let src_tmp = iframes[i].src;
        iframes[i].src = '';
        setTimeout(() => {
            iframes[i].src = src_tmp;
        }, 100);
    }
});

Answer 12

Я использовал комбинацию ответов Руслана Балчюнаса и Натана Макфарланда, чтобы написать что-то, что мне помогло.

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

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

Answer 13

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

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

Answer 14

Мое решение этого, которое работает для 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 Если эти параметры установлены, то эти решения не работают, и вместо видео вы получаете эффект "телевизор на мертвый канал".

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

Answer 15

1. Вставьте Youtube на свою страницу (html)

Добавьте div-контейнер Youtube на свой сайт:

<div id="ytplayer">This will be replaced with the Youtube iFrame</div>

Добавьте Youtube Javascript Api (iFrame)

<script>
    // Ads Youtube JS API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    // This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'ncif63mSZl4',
        WMode: 'transparent',
        wmode: 'opaque',
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'autohide':1,
            'rel':0,
            'showinfo': 0,
            'modestbranding': 1,
        },
      });
    }

   function stopVideo() {
    player.stopVideo();
   }
    
   function pauseVideo() {
    player.pauseVideo();
   }
    
   function playVideo(){
    player.playVideo();
   }
</script>

Управление с помощью jQuery (Bootstrap Modal)

  // Open Modal and start Playing Youtube Video
  $("#myModalTrigger").click(function(){
    $("#video-modal").modal(); // opens up the Modal
    playVideo(); // Starts playing Video
  });

  // Stop Player on Modal hide
  $('#video-modal').on('hide.bs.modal', function (e) {
    stopVideo(); // stop player
  });

Answer 16

Спустя 7 лет нам еще предстоит решить эту проблему.

Мы нашли лучший способ исправить это (вдохновленный ответом RobCalvert123)

  jQuery(".modal-backdrop, .modal.open .close,.modal.open .btn").live("click", function() {  
         // Get iframe opened 
         var iframe_open = jQuery('.modal.open');     
         // Get src from opened iframe 
         var src = iframe_open.attr('src');
         // replace src by src to stop it that's the tips
        iframe_open.attr("src", src);
});

Answer 17

Ответ @guillesalazaar был только первой половиной моего исправления, поэтому я был вынужден поделиться своей ситуацией на случай, если это поможет кому-то в будущем. У меня тоже есть встроенное видео на 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", '');
});

Answer 18

Мое решение для 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

Answer 19

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

Answer 20

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

Answer 21

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

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

Answer 22

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

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