<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Macweb Macweb 04.10.2022 14:15:06

Спасибо большое, то что надо!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.