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 -,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>
    <a class="video-container" data-embed="{@vp-youtube-id}" data-toggle="modal" data-target="#player" href="#{@post_name}"></a>

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


<!-- 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>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>

<script src="">            </script>

    $(document).ready(function() {

            var imageBox = document.querySelectorAll('.video-container');
            for (var i = 0; i < imageBox.length; i++) {
                var source = "" + 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() {
                }, 5000);

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

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

            $('.modal').on('', function(e) {
                window.location.hash = $(this).data( "embed" );
                $("#video").attr('src',"" + $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('', function() {


                $('.close').click(function() {


    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: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;

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