Ответ 1

Тестирование здесь, в FireFox 26.0, работает, как ожидалось. Когда я либо закрываю Modal, либо выхожу за него, а затем снова открываю его - видео возвращается, чтобы начать и остановить.

EDIT 1

Воспроизведенный в Chrome, видео действительно продолжает играть после закрытия Modal.

Попробуйте эти уже ответившие вопросы

Остановить видео с YouTube с помощью jquery?

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

Лучше всего использовать API YouTube для остановки видео. Ответ, который использует этот метод, доступен в вышеприведенных вопросах.

EDIT 2

Это решение работает.

Во-первых, получите JS из этого сообщения: API YouTube iframe: как я могу управлять iframe-плеером, который уже находится в HTML? и включите его на странице.

Добавьте этот JS после того, как вы загрузили выше script (непосредственно перед закрывающим тегом body)

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });
</script>

Вам также потребуется добавить идентификатор в div, содержащий iframe, как показано ниже

<div class="modal-body" id="yt-player">
    <iframe src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"></iframe>
</div>

Ответ 2

Здесь немного легче ответа на основе версии dizarter и одного из решений, на которые он ссылается.

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

Ответ 3

взгляните на мой код Мне не нужно было использовать какой-либо API

// on preview show iframe
$('#myModalPrev').on('show.bs.modal', function (e) {
  var idVideo = $(e.relatedTarget).data('id');
  $('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/' + idVideo + '?autoplay=true" frameborder="0" allowfullscreen></iframe>');
});
//on close remove
$('#myModalPrev').on('hidden.bs.modal', function () {
   $('#myModalPrev .modal-body').empty();
});

Ответ 4

И если мне нравится, когда вы хотите, чтобы видео было автовоспроизведено, а затем, чтобы остановить их, когда вы нажимаете кнопку "Модификация Bootstrap", вам нужно сделать что-то вроде этого:

$('.modal-iframe-youtube').click(function (e) {
        e.preventDefault();
        var sitetypeHref = $(this).attr('href');
        var sitetypeHrefAuto = sitetypeHref + "?autoplay=1"
        //sitetypeHref = sitetypeHref.replace('watch?v=', 'v/');
        $('#modal-window-iframe-youtube').on('shown.bs.modal', function () {
            var iFrame = $(this).find("iframe");
            iFrame.attr("src", sitetypeHrefAuto);
        });
        $("#modal-window-iframe-youtube").on('hidden.bs.modal', function () {
            var iFrame = $(this).find("iframe");
            iFrame.attr("src", sitetypeHref);
        });
        $('#modal-window-iframe-youtube').modal({ show: true });
    });

Обратите внимание, что я добавляю "? autoplay = 1" arg динамически. Надежда, которая помогает кому-то.

Ответ 5

Вот альтернатива для ответа CloudKiller, который фактически работает с автовоспроизведением, просто измените .attr на .removeAttr так:

jQuery('#myModal iframe').removeAttr("src", jQuery("#myModal iframe").removeAttr("src"));

Но еще более миниатюрная/упрощенная версия состоит в том, чтобы просто заменить src на пустое значение:

$('#myModal iframe').attr('src', '');

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

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

Ответ 6

Чтобы написать эффективный код, прежде всего нам нужно проверить готовность DOM, что iframe существует или нет, если существует, поэтому переходите на следующий уровень, иначе ничего не делайте. Я также использовал ловушку.

$("#myModal").on("hidden.bs.modal", function() {

    var _this = this,
        youtubeSrc = $(_this).find("iframe").attr("src");

    if($(_this).find("iframe").length > 0){                     // checking if there is iframe only then it will go to next level
        $(_this).find("iframe").attr("src", "");                // removing src on runtime to stop video
        $(_this).find("iframe").attr("src", youtubeSrc);        // again passing youtube src value to iframe
    }
}

Ответ 7

Это решение, которое сработало для меня (немного взломанное):

Сначала я обернул iframe div с именем "VideoId" следующим образом:

<div id="VideoId" style="position: relative; padding: 25px; height: 0;">
    <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
    src="//www.youtube.com/etc..."
    frameborder="0" 
    allowfullscreen>
    </iframe>
</div>

Тогда я сделал эту функцию:

function CloseVideo(){
    document.getElementById("VideoId").innerHTML=" ";
};

И наконец, при закрытии моей кнопки Panel (это было модно в моем случае) я добавил событие oncklick, вызывающее мою функцию, например:

<button type="button" class="btn pull-right" onclick="CloseVideo();" data-dismiss="modal">Back</button>

Конечно, если вы хотите снова называть его, вы должны пополнить содержимое VideoId с помощью javascript следующим образом:

document.getElementById("VideoId").innertHTML=
 '<iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"+
    'src="//www.youtube.com/etc..."'+
    'frameborder="0"'+ 
    'allowfullscreen>'+
    '</iframe>';

Он отлично работает в Chrome, Firefox, IE и Opera.

P.S. Я попытался удалить div непосредственно из вызова onclick, но он продолжал сообщать о недостающей скобке, - я не знаю, почему...

Ответ 8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;">
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'; return false;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    $("#myModal").modal('show');
    var url = $("#cartoonVideo").attr('src');

    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });

    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="https://www.youtube.com/embed/LGWqUVFrfU4?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>     

повторите эту проверку кода. он работает для меня красиво.