我正在使用wordpress主题上的youtube id创建视频库。这个想法是创建一个系统，客户可以在其中上传youtube ID，然后模板使用该ID生成视频库。我已经使用pods自定义字段很好地构建了它，并创建了一个模板。这只是一个模板，还有其他模板不是缩略图，而是按钮锚链接到视频，还有另一个模板带有视频滑块。

关于此模板，您可以单击多个缩略图，然后使用引导程序单击它们以打开模态。模态是视频。一切都很好。

我唯一很难解决的是如何从外部链接到模式。如果有人输入-website.com/video-gallery#video1，则应在该页面上弹出带有video1的模式。我变得不确定，不确定如何做到最好。

我尝试使用数据目标和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.25));
}

.video-container:before {
    width: 40px;
    height: 40px;
    border: 0 solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(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;
}