ВебмастерскаяНовостиСекреты вебмастера

Как остановить проигрывание видео при закрытии модального окна в Bootstrap?

Как остановить проигрывание видео при закрытии модального окна в 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произведения видео при любого модального окна.

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button