LaVOZs

The World’s Largest Online Community for Developers

'; javascript - If there are multiple modals with the same data target, how do I link externally? - LavOzs.Com

I am creating a video gallery using youtube ids on a wordpress theme. The idea is to create a system where clients can upload youtube ids and a template generates a video gallery using that id. I have built it pretty well using pods custom fields and created a template. This will be just one template, there will be others where it is not a thumbnail but a button anchor link to a video and also another template with a video slider.

Regarding this template, there are multiple thumbnails that you can click on which open a modal using bootstrap. The modal is a video. It all works great.

The only thing I am having a hard time figuring out is how to externally link to the modal. If someone types - website.com/video-gallery#video1,the modal with video1 should pop up on that page. I am getting undefined and not sure the best way of going about it.

I have tried to play with the data target and href. I don't want many modals, I wanted just one modal that generates new data on each click. this way, multiple videos are not loading at one time.

[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;
}

Related
How can I select an element with multiple classes in jQuery?
Linking to an external URL in Javadoc?
jQuery multiple events to trigger the same function
How to make links in a TextView clickable?
How to create an HTML button that acts like a link?
How to get the data-id attribute?
How does data binding work in AngularJS?
Passing data to a bootstrap modal
How to open a Bootstrap modal window using jQuery?
YouTube player in modal window