Модальное окно видео закрывается, когда я пытаюсь щелкнуть видео для воспроизведения HTML / CSS.

Question

У меня проблема с реализацией всплывающего окна видео с использованием html / css и bootstrap.

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

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

Вы можете увидеть, как это работает в настоящее время на нашем веб-сайте https://www.metis-online.com/#courses, и вы увидите в разделе «Объяснение видео» две ссылки, которые открывают соответствующие модели видео.

HTML:

<h5>Explainer Videos</h5>
<p>Check out our videos below taken from one of our recorded webinars to see if this certification is right for you:
<ul class="nobullet">
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-1">See what our online course looks like</a></li>   
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-2">Sample lessons</a></li>   
</ul>
<br/>
</p>


<div class="modal fade" id="flitpc-video-1">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content-vid">
         <div class="modal-body">
            <video id="flitpcdemo" controls autoplay width="100%">
               <source src="./video2.mp4" type="video/mp4">
            </video>
         </div>
      </div>
   </div>
</div>

<div class="modal fade" id="flitpc-video-2">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content-vid">
         <div class="modal-body">
            <video id="flitpcdemo" controls autoplay width="100%">
               <source src="./video2.mp4" type="video/mp4">
            </video>
         </div>
      </div>
   </div>
</div>

CSS:

.modal-content-vid{
    background: transparent !important;
    border: none !important;
}

Answer 1

Модальное окно

bootsrap имеет собственную структуру. Итак, класс modal-content является одним из его элементов, чтобы сделать его содержимое интерактивным, поэтому вам нужно добавить modal-content class

$(function(){
    $('.modal').modal({
        show: false
    }).on('hidden.bs.modal', function(){
        $(this).find('video')[0].pause();
    });
});

.modal-content-vid{
    background: transparent !important;
    border: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<h5>Explainer Videos</h5>
<p>Check out our videos below taken from one of our recorded webinars to see if this certification is right for you:
<ul class="nobullet">
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-1">See what our online course looks like</a></li>   
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-2">Sample lessons</a></li>   
</ul>
<br/>
</p>


<div class="modal fade" id="flitpc-video-1">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modal-content-vid">
         <div class="modal-body">
            <video id="flitpcdemo" controls autoplay width="100%;z-index:100%">
               <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
         </div>
      </div>
   </div>
</div>

<div class="modal fade" id="flitpc-video-2">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modal-content-vid">
         <div class="modal-body">
            <video id="flitpcdemo" controls autoplay width="100%">
               <source src="./video2.mp4" type="video/mp4">
            </video>
         </div>
      </div>
   </div>
</div>
CSS:

Answer 2

Вероятно, это случай всплытия событий

https://javascript.info/bubbling-and-capturing

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

как

<div class="modal-body" onclick=onModalBodyClick(event)>
    <video id="flitpcdemo" controls autoplay width="100%">
       <source src="./video2.mp4" type="video/mp4">
    </video>
</div>

И в JS

function onModalBodyClick(event) {
    event.stoppropagation();
}