Если есть несколько модалов с одной и той же целью данных, как мне связать внешнюю ссылку?

Question

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

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

Единственное, с чем мне трудно разобраться, это как внешняя ссылка на модал. Если кто-то печатает - website.com/video-gallery#video1, на этой странице должно появиться модальное изображение с video1. Я становлюсь неопределенным и не уверен, что лучший способ это сделать.

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

[pods name="video" limit="-1" ]

<div class="video-wrap col col-sm-3">
   [if vp-video-image]
    <a class="video-container" data-embed="{@vp-youtube-id}" data-toggle="modal" data-target="#player" href="#{@post_name}" style="background-image: url({@vp-video-image._src})"></a>
[/else]
    <a class="video-container" data-embed="{@vp-youtube-id}" data-toggle="modal" data-target="#player" href="#{@post_name}"></a>
[/if]

    <h3 class="vp-title">{@vp-video-title}</h3>

[/pods]


<!-- Modal -->
<div class="modal fade" id="{@vp-youtube-id}" tabindex="-1" role="dialog" aria-labelledby="player" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </button>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">            </script>

<script>
    $(document).ready(function() {


            var imageBox = document.querySelectorAll('.video-container');
            for (var i = 0; i < imageBox.length; i++) {
                var source = "https://img.youtube.com/vi/" + imageBox[i].dataset.embed + "/sddefault.jpg";
                var image = new Image();
                image.src = source;
                $(imageBox[i]).css('background-image', 'url(' + image.src + ')');
            };

            $(window).load(function() {
                setTimeout(function() {
                    $(window.location.hash).modal('show');
                }, 5000);
            });

            var youtube = document.querySelectorAll('.player');

            var $videoSrc;
            $('.video-container').click(function() {
                $videoSrc = $(this).data( "embed" );
            });
            console.log($videoSrc);

            $('.modal').on('shown.bs.modal', function(e) {
                window.location.hash = $(this).data( "embed" );
                $("#video").attr('src',"https://www.youtube.com/embed/" + $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" ); 
            });



                function revertToOriginalURL() {
                    var original = window.location.href.substr(0, window.location.href.indexOf('#'))
                    history.replaceState({}, document.title, original);
                }


                $('.modal').on('hidden.bs.modal', function() {
                    $("#video").attr('src',''); 
                    revertToOriginalURL();

                });

                $('.close').click(function() {
                    $("#video").attr('src',''); 
                    revertToOriginalURL();
                });

            });

<style>
    body {
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    }

.vp-title {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    padding: 10px 0 0 0;
    text-align: left;
    height: 60px;
}

.video-container {
    background-color: #000;
    margin-bottom: 0;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center center;
    display: block;
}


.video-container:after,
.video-container:before {
    content: "";
    position: absolute;
    top: 15%;
    left: 10%;
}

.video-container:after {
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-left: 18px solid #fff;
    margin-top: 9px;
    margin-left: 13px;
    -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));
}

.video-container:before {
    width: 40px;
    height: 40px;
    border: 0 solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
    background: rgba(0, 193, 222, 0.70);
}

.modal-dialog {
    max-width: 100%;
    margin: 30px auto;
}

.modal-body {
    position: relative;
    padding: 0px;
}

.close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}