Q

Bootstrap 3 и Youtube в Modal

2013-09-04 2 views 122 likes

122

Я пытаюсь использовать функцию Modal из Bootstrap 3, чтобы показать свое видео Youtube. Он работает, но я не могу нажимать на какие-либо кнопки в видео Youtube.Bootstrap 3 и Youtube в Modal

Любая помощь по этому вопросу?

Вот мой код:

<div id="link">My video</div> 

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      </div> 
      <div class="modal-body"> 
       <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> 
      </div> 
     </div> 
    </div> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script> 
<script src="js/bootstrap.min.js"></script> 
<script> 
    $('#link').click(function() { 
     var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1'; 
     $('#myModal').modal('show'); 
     $('#myModal iframe').attr('src', src); 
    }); 

    $('#myModal button').click(function() { 
     $('#myModal iframe').removeAttr('src'); 
    }); 
</script>

источник

2013-09-04 Maude Lavoie

A

ответ

91

Я нашел эту проблему (или проблемы я нашел и описал в https://github.com/twbs/bootstrap/issues/10489), связанные с преобразованием CSS3 (перевод) на .modal.fade .modal-dialog класса.

В bootstrap.css вы найдете линии, показанные ниже:

.modal.fade .modal-dialog { 
    -webkit-transform: translate(0, -25%); 
     -ms-transform: translate(0, -25%); 
      transform: translate(0, -25%); 
    -webkit-transition: -webkit-transform 0.3s ease-out; 
    -moz-transition: -moz-transform 0.3s ease-out; 
     -o-transition: -o-transform 0.3s ease-out; 
      transition: transform 0.3s ease-out; 
} 

.modal.in .modal-dialog { 
    -webkit-transform: translate(0, 0); 
     -ms-transform: translate(0, 0); 
      transform: translate(0, 0); 
}

Замену эти строки со следующим будет показывать фильм правильно (в моем случае):

.modal.fade .modal-dialog { 
    -webkit-transition: -webkit-transform 0.3s ease-out; 
    -moz-transition: -moz-transform 0.3s ease-out; 
     -o-transition: -o-transform 0.3s ease-out; 
      transition: transform 0.3s ease-out; 
} 

.modal.in .modal-dialog { 

}

источник

2013-09-06 10:21:50

+0

Хорошее исправление, работает в Firefox на Mac. –

0

MMhh ... Не могли бы вы опубликовать ваш весь HTML документ и какой браузер/версия вашей помощью?

Я воссоздал вашу страницу и протестировал ее в трех браузерах (Chrome, FF, IE8). Я смог остановить и запустить потрясающий трейлер WDS4 без каких-либо проблем. Вот мой код:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="bootstrap.min.css" rel="stylesheet" media="screen"> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="../../assets/js/html5shiv.js"></script> 
     <script src="../../assets/js/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div id="link">My video</div> 

    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 

       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       </div> 

       <div class="modal-body"> 
        <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="jq.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="bootstrap.min.js"></script> 
    <script> 
    $('#link').click(function() { 
     var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1'; 
     $('#myModal').modal('show'); 
     $('#myModal iframe').attr('src', src); 
    }); 

    $('#myModal button').click(function() { 
     $('#myModal iframe').removeAttr('src'); 
    }); 
</script> 
    </body> 
</html>

Возможно, вы попытались принести Z-Index вашего модального игрока выше в стеке?

$('#myModal iframe').css("z-index","999");

источник

2013-09-04 20:20:13 TyMayn

+0

Я попробовал ваш код, но это не сработало. Я не могу нажать любую кнопку в видео (пауза, громкость звука, качество и т. Д.). Вы поняли, что я не могу использовать кнопки YOUTUBE? Я смотрю на него в Firefox. - В какой версии jquery вы используете? Я использую 1.10.1 - Вы использовали Bootstrap 3? –

+0

Продолжить мои тесты: НЕ РАБОТАЙТЕ В Firefox РАБОТА В ХРОМЕ РАБОТА В Safari –

+0

Итак, я использую ваш код, проверяю его везде и работает везде, кроме Firefox. На Mac, когда я переворачиваю кнопку, изменение цвета, но я не могу на них нажимать. На ПК экран остается черным и воспроизводится видео. Это сводит меня с ума! Я пробовал запускать firefox с безопасным режимом, пустым кешем, ничего не работает. –

12

У меня есть один подскажите для вас!

Я хотел бы использовать:

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

вместо:

$('#myModal button').click(function() { 
    $('#myModal iframe').removeAttr('src'); 
});

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

источник

2013-10-02 13:44:47

12

Вот еще одно решение: Force HTML5 youtube video

Просто добавьте html5 = 1 для атрибута источника на IFRAME, как это:

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

источник

2013-10-15 18:46:31

4

я решил его на WordPress шаблона:

$videoLink ="http://www.youtube.com/watch?v=yRuVYkA8i1o;". 
<?php 
    parse_str(parse_url($videoLink, PHP_URL_QUERY), $my_array_of_vars); 
    $youtube_ID = $my_array_of_vars['v'];  
?> 
<a class="video" data-toggle="modal" data-target="#myModal" rel="<?php echo $youtube_ID;?>"> 
    <img src="<?php bloginfo('template_url');?>/assets/img/play.png" /> 
</a> 

<div class="modal fade video-lightbox" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      </div> 
      <div class="modal-body"></div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

<script> 
    jQuery(document).ready(function ($) { 
     var $midlayer = $('.modal-body');  
     $('#myModal').on('show.bs.modal', function (e) { 
      var $video = $('a.video'); 
      var vid = $video.attr('rel'); 
      var iframe = '<iframe />'; 
      var url = "//youtube.com/embed/"+vid+"?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1"; 
      var width_f = '100%'; 
      var height_f = 400; 
      var frameborder = 0; 
      jQuery(iframe, { 
       name: 'videoframe', 
       id: 'videoframe', 
       src: url, 
       width: width_f, 
       height: height_f, 
       frameborder: 0, 
       class: 'youtube-player', 
       type: 'text/html', 
       allowfullscreen: true 
      }).appendTo($midlayer); 
     }); 

     $('#myModal').on('hide.bs.modal', function (e) { 
      $('div.modal-body').html(''); 
     }); 
    }); 
</script>

источник

2014-01-27 07:41:32

4

Если вы не хотите редактировать загрузочный CSS или все вышеперечисленное не поможет вам вообще (например, в моем случае), есть легкое исправление, чтобы получить видеоролик в модальном формате o n Firefox.

Вам просто нужно удалить класс «выцветанию» из модального и, как он открывает «в» классе, тоже:

$('#myModal').on('shown.bs.modal', function() { 
    $('#myModal').removeClass('in'); 
});

источник

2014-03-18 19:59:01 0xC0FF33

+0

Работает как очарование, спасибо! – acme

28

я соединял этот HTML/JQuery динамического видео YouTube модальных скрипт, который автоматически воспроизводит видеоролик YouTube, когда нажат триггер (ссылка), триггер также содержит ссылку для воспроизведения.Скрипт найдет собственный загрузочный модальный вызов и откроет общий модальный шаблон с данными из триггера. Смотрите ниже и дайте мне знать, что вы думаете. Я хотел бы услышать мысли ...

HTML модальных Trigger:

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>

HTML MODAL ВИДЕО ШАБЛОН:

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <div> 
      <iframe width="100%" height="350" src=""></iframe> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

Jquery ФУНКЦИЯ:

//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG 
function autoPlayYouTubeModal(){ 
    var trigger = $("body").find('[data-toggle="modal"]'); 
    trigger.click(function() { 
    var theModal = $(this).data("target"), 
    videoSRC = $(this).attr("data-theVideo"), 
    videoSRCauto = videoSRC+"?autoplay=1" ; 
    $(theModal+' iframe').attr('src', videoSRCauto); 
    $(theModal+' button.close').click(function() { 
     $(theModal+' iframe').attr('src', videoSRC); 
    }); 
    }); 
}

вызов функции :

$(document).ready(function(){ 
    autoPlayYouTubeModal(); 
});

скрипку: http://jsfiddle.net/jeremykenedy/h8daS/1/

источник

2014-05-13 11:03:43 developernator

+7

Это связывает событие с кнопкой закрытия при каждом открытии модального файла, а также вы должны использовать событие 'hidden.bs.modal' как средство отключения видео, так как пользователь может делать другие вещи, чтобы закрыть модальный (например, нажмите на него). –

+0

Автовоспроизведение против условий API Youtube.Просто получил приложение, отклоненное с помощью webview на рынке приложений Android ... – giorgio79

+0

Похоже, ваше приложение может иметь что-то еще не так. Вот документация YouTube. https://developers.google.com/youtube/player_parameters https://support.google.com/youtube/answer/6327615?co=GENIE.Platform%3DAndroid&hl=ru – developernator

9

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

<!--Script stops video from playing when modal is closed--> 
<script> 
    $("#myModal").on('hidden.bs.modal', function (e) { 
     $("#myModal iframe").attr("src", $("#myModal iframe").attr("src")); 
    }); 
</script>

источник

2014-09-16 13:26:25 user2232930

0

<a href="#" class="btn btn-default" id="btnforvideo" data-toggle="modal" data-target="#videoModal">VIDEO</a> 

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <div> 
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

источник

2015-01-22 08:23:10 FahadAkram

0

$('#introVideo').modal('show'); используя конфликты с начальной загрузкой правильной запуск. Когда вы нажмете на ссылку, которая открывает Modal, она закроется сразу после завершения анимации затухания. Просто удалите $('#introVideo').modal('show'); (с использованием начальной загрузки v3.3.2)

Вот мой код:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- triggering Link --> 
 
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a> 
 

 

 
<!-- Intro video --> 
 
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="embed-responsive embed-responsive-16by9"> 
 
      <iframe class="embed-responsive-item allowfullscreen"></iframe> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> 
 

 
<script> 
 
    //JS 
 

 
$('#videoLink').click(function() { 
 
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1'; 
 
    // $('#introVideo').modal('show'); <-- remove this line 
 
    $('#introVideo iframe').attr('src', src); 
 
}); 
 

 

 
$('#introVideo button.close').on('hidden.bs.modal', function() { 
 
    $('#introVideo iframe').removeAttr('src'); 
 
}) 
 
</script>

источник

2015-03-19 10:32:01

0

ответ user3084135 работал хорошо в качестве основы для меня, но я также необходимо включают:

Тег «видео» для локально размещенного видео, а также тег «iframe» для внешне организовано видео
Убедитесь, что источник был удален, однако модальный был уволен
раствор работал в адаптивном дизайне Bootstrap
Все видео Авто-игра на модально открытой
Несколько модальности возможны

Моя законченное решение выглядит следующим образом:

MODAL TRIGGER КНОПКА

<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">

Атрибут фрейма данных может быть «iframe» или «video», чтобы отобразить соответствующий тип тега: iframe для внешних видео, видео для локального размещения.

Bootstrap отзывчивого ВИДЕО КОНТЕЙНЕРЫ

плавающий фрейм:

<div align="center" class="embed-responsive embed-responsive-16by9"> 
    <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe> 
</div>

видео:

<div align="center" class="embed-responsive embed-responsive-16by9"> 
    <video width="640" height="364" controls> 
     <source src="" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video>        
</div>

Они оба находится в пределах стандарта Bootstrap реагирующих модальных див.

Jquery SCRIPT

<script> 
$(document).ready(function(){ 
    function autoPlayModal(){ 
     var trigger = $("body").find('[data-toggle="modal"]'); 
     trigger.click(function() { 
     var theFrame = $(this).data("frame"); 
     var theModal = $(this).data("target"); 
     videoSRC = $(this).attr("data-theVideo"); 
     if (theFrame == "iframe") { 
      videoSRCauto = videoSRC+"?autoplay=1" ; 
     } else { 
      videoSRCauto = videoSRC; 
      $("[id*=portfolioModal] video").attr('autoplay','true'); 
     } 
     $(theModal+' '+ theFrame).attr('src', videoSRCauto); 
     $("[id*=portfolioModal]").on('hidden.bs.modal', function() { 
      $("[id*=portfolioModal] "+ theFrame).removeAttr('src'); 
     }) 
     }); 
    } 

    autoPlayModal(); 
}); 
</script>

Поскольку автозапуск работает по-разному с IFrame и видео тегов, условное используется для борьбы с каждым. Чтобы разрешить несколько модалов, для их идентификации используется подстановочный знак (портфолиоModal1-6 в моем случае).

источник

2015-06-05 20:58:19 awvidmer

0

У меня была такая же проблема - я просто добавил шрифтами удивительным КДС ссылки - закомментировать самозагрузки один ниже решить мою проблему .. действительно не устранить его как шрифт удивительном все еще работал -

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

источник

2016-06-26 10:41:56

-3

$('#videoLink').click(function() { 
 
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1'; 
 
    // $('#introVideo').modal('show'); <-- remove this line 
 
    $('#introVideo iframe').attr('src', src); 
 
}); 
 

 
$('#introVideo button.close').on('hidden.bs.modal', function() { 
 
    $('#introVideo iframe').removeAttr('src'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<!-- triggering Link --> 
 
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a> 
 

 
<!-- Intro video --> 
 
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="embed-responsive embed-responsive-16by9"> 
 
      <iframe class="embed-responsive-item allowfullscreen"></iframe> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-07-04 11:44:12 Kondal

+0

Пример не запускается –

0

Bootstrap действительно обеспечивает модальное всплывающее функциональность из коробки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<a class="btn btn-primary" data-toggle="modal" href="#modal-video"><i class="fa fa-play"></i> watch video</a> 
 
<div class="modal fade" id="modal-video" style="display: none;"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close <i class="fa fa-times"></i></button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <iframe type="text/html" width="640" height="360" src="//www.youtube.com/embed/GShZUiyqEH0?rel=0?wmode=transparent&amp;fs=1&amp;rel=0&amp;enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen=""></iframe> 
 
     <p>Your video</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-03-09 21:34:14

0

Ok. Я нашел решение.

   <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"> 
         <span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
        </button> 
        <h3 class="modal-title" id="modal-login-label">Capital Get It</h3> 
        <p>Log in:</p> 
       </div> 

       <div class="modal-body"> 

        <h4>Youtube stuff</h4> 



      <iframe src="//www.youtube.com/embed/lAU0yCDKWb4" allowfullscreen="" frameborder="0" height="315" width="100%"></iframe>  
      </div> 


       </div> 

      </div> 
     </div> 
    </div>

источник

2017-03-11 11:11:05