Modal Window cannot opens in PHP loop due to <ul>
Here is the code of bootstrap Modal 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
And here is the complete code
Here is the JS Code
<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">×</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>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>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> 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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
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?
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
The dialog target is an iframe already.
Is the problem that your source is the full iframe element?
If you are meaning instead of
https://player.vimeo.com/video/155360803<iframe src="https://player.vimeo.com/video/155360803" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>The dialog target is an iframe already.
Is the problem that your source is the full iframe element?
ASKER
Ok thanks for the explanation. Not my source is not full iframe element. Just asking for information
ASKER
Thanks for this.
You are welcome.
ASKER
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
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
Best to open a new question.
ASKER
ok
ASKER
Open in new window
Looking forward for your suggestion.