it-roy-ru.com

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>
35
catchmikey

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

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

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

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

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

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

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

72
gmslzr

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

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

        });
    });
});
15
knightkiddo

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

Используйте .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/

13
Nathan McFarland

Здесь я обобщаю ответ @ 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"));
    });
  });
});

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

ОБНОВЛЕНИЕ: Код изменен для модальных с несколькими iFrames.

10
thekingoftruth

Сначала вы должны очистить 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.

5
littlealien

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

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

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

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

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

$("#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();
2
nikola_wd

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

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

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

1
Jonathan

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

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

1
Dave Sag

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

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

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

1
ckpepper02
$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})
0
Ruslanas Balčiūnas
 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});
0
Birendra Maharjan

Ответ @ 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", '');
});
0
Frankenmint