Как остановить проигрывание видео при закрытии модального окна в Bootstrap?
Доброго времени суток! В данной статье я покажу Вам, как можно остановить воспроизведение
видеоролика с Youtube, который проигрывается внутри всплывающего модального окна, при закрытии последнего.
В примере используется Bootstrap 5** и его возможности.
Код далее:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<title>JS Stop Playing Video in Modal</title>
</head>
<body>
<!-- Модальное окно - вызывается с разным содержимым, в зависимости от того, какая кнопка была нажата -->
<div class="modal fade" id="video_modal" tabindex="-1" aria-labelledby="videoInterview" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-body p-0">
<iframe width="100%" height="450" src="" class="d-block" title="интервью с клиентами"
frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class="container">
<h2 class="my-4">Разные видео</h2>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="rounded-circle mb-3" alt="" />
<h5 class="card-title mb-3">Видео 1</h5>
<!-- аттрибут data-bs-video-url - содержит ссылу на видео -->
<a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#video_modal"
data-bs-video-url="https://www.youtube.com/embed/tLcnJEMnlTs">Смотреть</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" class="rounded-circle mb-3"
alt="" />
<h5 class="card-title mb-3">Видео 2</h5>
<a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#video_modal"
data-bs-video-url="https://www.youtube.com/embed/YsoghPlMQdY">Смотреть</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-circle mb-3" alt="" />
<h5 class="card-title mb-3">Видео 1</h5>
<a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#video_modal"
data-bs-video-url="https://www.youtube.com/embed/tLcnJEMnlTs">Смотреть</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-light">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/20.jpg" class="rounded-circle mb-3"
alt="" />
<h5 class="card-title mb-3">Видео 2</h5>
<a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#video_modal"
data-bs-video-url="https://www.youtube.com/embed/YsoghPlMQdY">Смотреть</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script>
'use strict'
function OpenVideoModal(htmlId, htmlDataAttr) {
const videoModal = document.getElementById(htmlId);
let iframe;
// событие, возникающее при отображении модального окна
videoModal.addEventListener('show.bs.modal', function (event) {
// Кнопка, которая вызвала данный модал
const button = event.relatedTarget;
// Вытаскиваем данные из аттрибута data-bs-video-url*
// в нашем случаем там содержится ссылка на видео
const videoUrl = button.getAttribute(htmlDataAttr);
// для отладки - в консоль
console.log(videoUrl)
// ссылка на фрейм с видео в разметке
iframe = videoModal.querySelector('.modal-body iframe');
// загружаем видео в фрейм
iframe.src = videoUrl;
});
// событие, возникающее при закрытии модального окна
videoModal.addEventListener('hide.bs.modal', function (event) {
// удаляем ссылку на источник видео - останавливаем видео
iframe.src = '';
});
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// при загрузке страницы - вешаем обработчики на модальное окно
OpenVideoModal('video_modal', 'data-bs-video-url');
});
</script>
</body>
</html>
Таким образом, в данной статье мы решили сразу две проблемы: 1) это одно модальное окно Bootstrap 5 на все карточки;
2) остановка воcпроизведения видео при любого модального окна.
