Open a Youtube video embedded in a Bootstrap Modal

usage.html

<!-- Click to action to open video into modal, 'A_YOUTUBE_URL' should be any video URL from Youtube -->
<button type="button" class="video-to-modal" data-siteyb-url="A_YOUTUBE_URL">
    Watch the video
</button>

<!-- The Bootstrap Modal container dedicated to embed video -->
<div class="modal" id="videoToModal" tabindex="-1" aria-labelledby="videoToModal" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-fullscreen-xl-down overflow-hidden">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="videoToModal-container ratio ratio-16x9"></div>
            </div>
        </div>
    </div>
</div>

video-to-modal.js

/*
 * "Video to modal" component allows to open a Youtube URL into a Bootstrap modal
*/
import { Modal } from "bootstrap/dist/js/bootstrap.bundle.js";

/*
 * Apply a powerful regex to get the ID from common Youtube url formats
 */
function parse_youtube_url(url) {
    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    return (url.match(p)) ? RegExp.$1 : false;
}

/*
 * Append iframe to the youtube embed URL and display the modal window
 */
function display(modal_container, modal_object, video_url) {
    let video_id = parse_youtube_url(video_url);
    let video_container = modal_container.querySelector(".videoToModal-container");

    if(video_container) {
        // Replace modal body content with a new iframe
        video_container.innerHTML =
            '<iframe src="//www.youtube.com/embed/'
            + video_id
            + '?autoplay=1" class="embed-responsive-item" frameborder="0" '
            + 'allow="accelerometer; autoplay; clipboard-write; '
            + 'encrypted-media; gyroscope; picture-in-picture; web-share"'
            + 'referrerpolicy="strict-origin-when-cross-origin"'
            + 'allowfullscreen></iframe>';

        // Then show modal
        modal_object.show();
    }
}

export function VideoToModalComponent() {
    'use strict';
    const triggers = document.querySelectorAll(".video-to-modal");

    // There is only need to init modal if there is a trigger into the
    // document
    if (triggers.length > 0) {
        const videoToModalContainer = document.getElementById("videoToModal");

        // Modal contains have to be in document else it is an error
        if (videoToModalContainer) {
            const videoToModalObject = new Modal(videoToModalContainer);

            triggers.forEach(
                trigger => {
                    // Bind click event to open modal with video
                    trigger.addEventListener("click", () => {
                        display(
                            videoToModalContainer,
                            videoToModalObject,
                            trigger.getAttribute("data-siteyb-url")
                        );
                    });
                }
            );

            videoToModalContainer.addEventListener("hidden.bs.modal", event => {
                let iframe_element = event.target.querySelector("iframe");
                if(iframe_element) {
                    iframe_element.remove();
                }

            });
        }
    }
};