iframe播放按钮正在作为旋转木马左指示灯工作

Question

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

Answer 1

In your approach, some div elements, selectors are misplaced and one key div is missing, need some CSS changes required.

1. "carousel slide" in Modal HTML (Remove it)
2. <div class="carousel-inner"> is misplaced, it should come after <ol class="carousel-indicators"></ol>
3. Missing key carousel Element <div id="selector" class="carousel slide" data-ride="carousel"> Add it after modal-body
4. In Prev and Next button you are targeting href="#video" which is the id of Modal
5. In carousel indicators you are targeting data-target="#video" which is the id of Modal

CSS 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 -->

Fiddle