Modal Window cannot opens in PHP loop due to <ul>

Here is the code of bootstrap Modal WINDOW
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <!--a href="#modal_video" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a-->

    <!-- Modal HTML -->
    <div id="modal_video" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

Open in new window


And below  is the HTML for SLider and PHP Loop which gets picture name and some other attributes etc from database to run slider.
On each slide there is a video button. If user clicks on that button then Modal window opens with a relevant video.

The Issue is that if I place the above MODAL Window Code after the PHP LOOP( i.e. after <UL>) then the MODAL window cannot works.
Even I had tried and place the code in <li> then MODAL cannot work.

Actually I want to put MODAL WINDOW CODE in Loop because in database
I have a field i.e. Embed_code which is the video code and that video will open in MODAL WINDOW

<div class="modal-body">
    <iframe id="cartoonVideo" width="560" height="315" src="<?=$vimeo_code?>" frameborder="0" allowfullscreen></iframe>
</div>

Open in new window


And here is the complete code

<div class="page-section hero-slider-main" style=" overflow: hidden; padding-bottom:0;">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="hero-slider" id="hero-slider">



                <ul>
              
              <?php
              
              $qry_fcards = <<< QUERY1
              Select * from f_module where status='enable'
              QUERY1;
              $rst_fcards = mysqli_query($conn, $qry_fcards) or die("Error = ".mysqli_error($conn));
              while($row = mysqli_fetch_array($rst_fcards))
              {
              $fcard_img = $row["fimage"];             
              $vimeo_code = $row["vimeo_code"];
              
              If($openlink_in_newtab=='yes')
              {
              $target_link = '_blank';
              }
              else
              {
              $target_link = '';
              }
              
              
              ?>
              
                              <!-- Slide1 -->
                    <li>
                        <div class="media">
                            <figure> <img src="<?=$base_path;?>misc/uploads_featurecard/feature_image/<?=$fcard_img?>" alt="">
                                        <!-- Video Button -->
                                            <a href="#modal_video" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal2</a>
              
                              <svg id="icon-play" viewBox="0 0 32 32" width="100px" height="100px">
                                <path class="path2" d="M29.194 6.762c-4.301-6.022-12.701-8.362-19.274-5.626-2.867 1.278-5.224 3.261-6.918 5.733-1.895 2.746-3.005 6.077-3.005 9.667 0 1.965 0.333 3.853 0.945 5.609 2.137 6.229 8.245 9.973 14.802 9.855 2.448-0.041 4.784-0.461 6.971-1.203 2.073-0.745 3.942-2.103 5.333-3.857 1.143-1.398 2.075-2.986 2.74-4.707q0.341-0.918 0.568-1.769c0.409-1.358 0.645-2.918 0.645-4.533 0-1.791-0.29-3.515-0.825-5.127-0.454-1.47-1.14-2.85-2.014-4.088zM27.718 21.69c-4.038 7.731-15.091 11.27-21.997 3.664-2.31-2.56-3.411-5.373-3.386-8.541s0.374-6.253 2.733-8.531c2.653-2.56 5.76-5.021 9.51-5.811 0.411-0.093 0.898-0.161 1.395-0.191 5.225-0.286 11.638 3.58 13.11 8.722 0.934 3.258-0.128 8.32-1.366 10.688z"></path>
                                <path class="path3" d="M14.787 8.96c-0.579-0.371-1.002 2.112-1.11 6.918-0.096 4.224 0.048 6.221 0.57 5.923 4.224-2.4 7.834-6.368 7.834-6.71s-3.875-3.933-7.293-6.131z"></path>
                              </svg>
              
                            <figcaption>
                                    <h1 class="bgcolor">Ras Abu Aboud Stadium</h1>
                                    <br/>
                                    <!--p class="text bgcolor">A venue with innovation at its heart</p>
                                    <br/-->
                                    <?php if($clink=="yes"){ ?>
                                    <button class="btn bgcolor">
                                      <a href="<?php echo $link_path?>" target="<?php echo $target_link?>">Enter CTA Copy</a>
                                    </button>
              
                                  <?php } ?>
                                </figcaption>
                            </figure>
                        </div>
                    </li>
              
              <?php } ?>

              </ul>
            </div>
            </div>
            </div>
            </div>              

Open in new window


Here is the JS Code
<script type="text/javascript">
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    var url = $("#cartoonVideo").attr('src');

    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });

    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
});
</script>

Open in new window

Yuri BoyzSoftware EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
1. Where you put the modal is irrelevant.
2. PHP is irrelevant as it simply creates the page and dies - the page functions in the browser
3. Creating the modal in the loop is inefficient. Rather link the <li> items to one modal using JavaScript to populate the dialog when it is opened
4. The JS code you posted does not really do anything useful.

Some notes
It is not necessary to do this
<button class="btn bgcolor">
 <a ...> </a>
</button>

Open in new window

Just apply the style directly to the <a
<a class="btn bgcolor" href=...."></a>

Open in new window


To your problem.

1. Change your link to open the modal to this
<a href="#modal_video" class="btn btn-lg btn-primary" data-toggle="modal" data=src="<?=$vimeo_code?>">Launch Demo Modal2</a>

Open in new window


2. jQuery
<script>
$(function() {
  $("#modal_video").on('show.bs.modal', function(e){
    var src = e.relatedTarget.dataset.src;
    $("#cartoonVideo").attr('src', src);
  });
  $("#modal_video").on('hide.bs.modal', function(e){
    $("#cartoonVideo").attr('src', '');
  });
})
</script>

Open in new window


You can see it working here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Yuri BoyzSoftware EngineerAuthor Commented:
thanks for this. It works well with youtube. But unfortunately the vimeo embed code not works. Here is the sample Vimeo Code.
<iframe src="https://player.vimeo.com/video/155360803" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/155360803">An ordinary blue Monday / &#039;n Gewone blou Maandagoggend</a> from <a href="https://vimeo.com/sfeer">Naomi</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Open in new window


Looking forward for your suggestion.
Julian HansenCommented:
It works for me.

I have updated the sample here demonstrating it

I just copied one of the <li> blocks updated the URL for the Vimeo video and it works.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Yuri BoyzSoftware EngineerAuthor Commented:
actually i was using the complete <iframe> block which vimeo provides in the SHARE THIS VIDEO option. And you have just used player.vimeo.com. Is it possible to use full iframe url?
Julian HansenCommented:
I did use the iframe url - copied out of your last post and pasted it into my code. The only change I made was to drop the https: from the beginning but that shouldn't matter it will work with or without the protocol prefix.

If you are meaning instead of
https://player.vimeo.com/video/155360803

Open in new window

We use this
<iframe src="https://player.vimeo.com/video/155360803" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Open in new window

Then, no you can't do that.
The dialog target is an iframe already.
Is the problem that your source is the full iframe element?
Yuri BoyzSoftware EngineerAuthor Commented:
Ok thanks for the explanation. Not my source is not full iframe element. Just asking for information
Yuri BoyzSoftware EngineerAuthor Commented:
Thanks for this.
Julian HansenCommented:
You are welcome.
Yuri BoyzSoftware EngineerAuthor Commented:
Hi,  I have a question related to this question:

In my question where I put a complete code check the section which has <figure> tag which contains the image.
I need to show Youtube or Vimeo video in it, so that when user click on that video it will play video in that block.

Thanks
Julian HansenCommented:
Best to open a new question.
Yuri BoyzSoftware EngineerAuthor Commented:
ok
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.