I am trying to display videos as a slideshow inside bootstrap modal dynamically. But when videos are loaded, the corresponding play button functions as carousel left indicator. And also the video is auto-playing. I also tried using tag, which stops the auto-play, but still the play button functioning as carousel left indicator. Thanks in advance.
Below is my code.
<div class="modal fade and carousel slide" id="video">
<div class="modal-dialog" style="margin-top:250px;" >
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<?php
$id=$_GET['id'];
//$i=0;
$qryr="select * from released_movies where rel_id='$id' ";
$qryrr=$con->query($qryr);
while($rrr=$qryrr->fetch_assoc()){
$film=$rrr['rel_movies'];
$qq="select * from events where film='$film'";
$qrr=$con->query($qq);
while($roo=$qrr->fetch_assoc()){
$rowss[] = $roo;
}
?>
<ol class="carousel-indicators">
<?php
$i = 1; //Counter
foreach ($rowss as $roo): //Foreach
$ol_class = ($i == 1) ? 'active' : ''; //Set class active for only indicator which belongs to respective Image
?>
<!--Here I add the counter to data-slide attribute and add class to indicator-->
<li data-target="#video" data-slide-to="<?php echo $i;?>" class="<?php echo $ol_class; ?>"></li>
<?php $i++; ?>
<?php endforeach; ?> <!--Close Foreach-->
</ol>
<?php
$i = 1; //Counter
foreach ($rowss as $roo): //Foreach
$item_class = ($i == 1) ? 'item active' : 'item'; //Set class active for image which is showing
?>
<div class="<?php echo $item_class; ?>"> <!-- Define Active Class Here-->
<iframe width="100%" height="500px" src="../AbaamAdmin/Events_Videos/<?php echo $roo['event_videos'];?>" frameborder="0" allowfullscreen></iframe>
</div>
<?php $i++; ?>
<?php endforeach; ?> <!-- Close Foreach-->
</div> <!-- /.item active-->
<a class="left carousel-control" href="#video" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<!-- <span class="glyphicons glyphicons-left-arrow"></span>-->
</a>
<a class="right carousel-control" href="#video" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<!--<span class="glyphicons glyphicons-right-arrow"></span>-->
</a>
<?php } ?>
</div> <!-- /.carousel-inner -->
</div><!-- /.modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
In your approach, some div elements, selectors are misplaced and one key div is missing, need some CSS changes required.
"carousel slide" in Modal HTML (Remove it)<div class="carousel-inner"> is misplaced, it should come after <ol class="carousel-indicators"></ol><div id="selector" class="carousel slide" data-ride="carousel"> Add it after modal-bodyPrev and Next button you are targeting href="#video" which is the id of Modaldata-target="#video" which is the id of ModalCSS Changes required to fix the issue when clicking on Play / Stop button causing the video slide to next, Reason the Next / Previous button is overlapping the video control, following changes in CSS will fix the issue
.carousel-control {
bottom: 55px !important;
}
To stop the auto play, add autoplay=false in video iframe.
Final HTML will be
Note: I named the carousel selector id videobox
<div class="modal fade and" id="video">
<div class="modal-dialog" style="margin-top:250px;" >
<div class="modal-content">
<div class="modal-body">
<div id="videobox" class="carousel slide" data-ride="carousel">
<?php
$id=$_GET['id'];
//$i=0;
$qryr="select * from released_movies where rel_id='$id' ";
$qryrr=$con->query($qryr);
while($rrr=$qryrr->fetch_assoc()){
$film=$rrr['rel_movies'];
$qq="select * from events where film='$film'";
$qrr=$con->query($qq);
while($roo=$qrr->fetch_assoc()){
$rowss[] = $roo;
}
}
?>
<ol class="carousel-indicators">
<?php
$i = 1; //Counter
foreach ($rowss as $roo):
$ol_class = ($i == 1) ? 'active' : '';
?>
<li data-target="#videobox" data-slide-to="<?php echo $i;?>" class="<?php echo $ol_class; ?>"></li>
<?php $i++; ?>
<?php endforeach; ?>
</ol>
<div class="carousel-inner">
<?php
$i = 1; //Counter
foreach ($rowss as $roo):
$item_class = ($i == 1) ? 'item active' : 'item';
?>
<div class="<?php echo $item_class; ?>">
<iframe width="100%" height="500px" src="../AbaamAdmin/Events_Videos/<?php echo $roo['event_videos'];?>" frameborder="0" allowfullscreen autoplay="false"></iframe>
</div>
<?php $i++; ?>
<?php endforeach; ?>
</div> <!-- /.item active-->
<a class="left carousel-control" href="#videobox" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<!-- <span class="glyphicons glyphicons-left-arrow"></span>-->
</a>
<a class="right carousel-control" href="#videobox" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<!--<span class="glyphicons glyphicons-right-arrow"></span>-->
</a>
</div> <!-- /.carousel-inner -->
</div><!-- /.modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->