Как очистить модальное окно Bootstrap?

Question

[Сергей]

Добрый день. Возникла проблема при встраивании видео с youtube в модальное окно twitter bootstrap. При закрытии окна видео продолжает проигрываться. Как сделать, чтобы при закрытии окна видео закрывалось, а при повторном открытии начинало проигрываться заново. Спасибо.

Answer 1

[Сергей]

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

Для тех, кто как и я столкнется с этой проблемой, вот решение:

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal .modal-body').html('');
});

Это мы очищаем окно. Но в таком случае, при повторном открытии нас ждет пустота. А так же при открытии окна, оно дергается из за полосы прокрутки. Решаем это таким способом:

$(".modal").on("show.bs.modal", function(){
    $('#myModal .modal-body').html('<iframe><i>Фрейм с вашим видео из youtubе</i></iframe');
    var $bodyWidth = $("body").width();
    $("body").css({'overflow-y': "hidden"}).css({'padding-right': ($("body").width()-$bodyWidth)});
});

$(".modal").on("hidden.bs.modal", function(){
    $("body").css({'padding-right': "0", 'overflow-y': "auto"});
});

Comments

[Владик Лимонадик]

В условиях жесткого дедлайна на тостере ответ на свой вопрос не пишут через 40 минут :-)

[Сергей]

knitevision1: Ну это я уже перед уходом домой с работы :)

Answer 2

[vladislav77]

Спасибо. Очень помог!

Answer 3

[mrMemfis]

Мое решение. Попроще и без выкрунтасов с CSS

/*создаем iframe с видео*/
var videoIframe = $("<iframe/>", {
                "class": "embed-responsive-item",
                "src": "https://www.youtube.com/embed/cNLJB-giaVo?autoplay=1&enablejsapi=1&playerapiid=ytplayer",
                "width":"96%",
                "height":"400px",
                "frameborder":"0",
                "allowfullscreen":""

            }); 
/*по клику на кнопку .toggleModalVideoYoutube аттачим iframe с видео в модалку*/
            $('.toggleModalVideoYoutube').click(function () {
                $('#myModalVideo').modal('show');
                videoIframe.appendTo('#myModalVideo .modal-body');                
            });
/*по закрытию модалки убираем   iframe */
            $('#myModalVideo').on('hidden.bs.modal', function () {
                videoIframe.detach();
            });