Как очистить несколько URL-адресов YouTube тега iframe в модальном всплывающем окне? - PullRequest
Новая
       25

Как очистить несколько URL-адресов YouTube тега iframe в модальном всплывающем окне?

1 голос
/ 05 июля 2019

У меня есть модальное всплывающее окно, в котором я показываю видео на YouTube. Проблема, с которой я сталкиваюсь, заключается в том, что видео воспроизводится, хотя я закрыл модальное всплывающее окно. Я очистил URL на модальной шкуре. Но он очищает только один URL. Остальные URL не очищаются. Пожалуйста, помогите. 

$(document).ready(function() {
      /* Get iframe src attribute value i.e. YouTube video url
      and store it in a variable */
      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);
      });

  });

1 Ответ

0 голосов
/ 05 июля 2019

@ Sachin, вам нужно установить Общий класс для вашего модального режима, если вы создали несколько модальных типов и добавили один и тот же класс.

Я думаю, что вы работаете, как показано ниже в демонстрационном HTML. 

    Like Eg.
    <!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">   

  </div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog">   

  </div>
</div>
<!-- Modal -->
<div id="myModal3" class="modal fade" role="dialog">
  <div class="modal-dialog">   

  </div>
</div>

Вам необходимо установить общий класс

, а также установить тег iframe, общий класс. 

    <!-- Modal -->
<div id="myModal1" class="modal fade jsyoutube" role="dialog">
  <div class="modal-dialog">   
    <iframe src="URL" class="jsframe"></iframe>
  </div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade jsyoutube"  role="dialog">
  <div class="modal-dialog">   
<iframe src="URL" class="jsframe"></iframe>
  </div>
</div>
<!-- Modal -->
<div id="myModal3" class="modal fade jsyoutube" role="dialog">
  <div class="modal-dialog">   
<iframe src="URL" class="jsframe"></iframe>
  </div>
</div>

сценарий JavaScript 

    $(document).ready(function() {     
      $(".jsyoutube").on('hide.bs.modal', function() {
            $(".jsframe").attr('src', '');
      });
  });
...