2

i have a problem and i dont know how to fix it. I have a acf repeater, and a video repeater on it from youtube, when i click a button to open the video, the video is opened as a modal, but when i close the modal, the video keep still playing in background How to stop video from playing after the modal has been closed? Thanks

<?php if( have_rows('video_youtube1') ):
$i = 1; // Set the increment variable
// loop through the rows of data
while ( have_rows('video_youtube1') ) : the_row();
    $modal_video = get_sub_field('video');
    $modal_header = get_sub_field('titulli_video');
    $modal_body = get_sub_field('paragrafi_video');
    $modal_footer = get_sub_field('butoni_video');
?>
    <?php if (get_sub_field('position') == 'left_video') { ?>
        <div class="donationVideoFeature">
            <div class="video-container">
            <div class="playDiv">
                    <i class="fa fa-play" data-toggle="modal" data-target="#myModal-<?php echo $i;?>"></i>
            </div>
                <div class="modal" id="myModal-<?php echo $i;?>">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body">
                                <?php echo $modal_video; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="donationVideoText p-5 ">
                <h3 class="donation-title"><?php the_sub_field('titulli_video');?></h3>
                <p class="donation-paragraph"><?php the_sub_field('paragrafi_video');?></p>
                <button class="btn btn-lg donateBTN"><?php the_sub_field('butoni_video');?></button>
            </div>
        </div>

    <?php } else { ?>

        <div class="donationVideoFeature">
            <div class="donationVideoText p-5 ">
                <h3 class="donation-title"><?php the_sub_field('titulli_video');?></h3>
                <p class="donation-paragraph"><?php the_sub_field('paragrafi_video');?></p>
                <button class="btn btn-lg donateBTN"><?php the_sub_field('butoni_video');?></button>
            </div>
            <div class="video-container">
            <div class="playDiv">
                    <i class="fa fa-play" data-toggle="modal" data-target="#myModal-<?php echo $i;?>"></i>
            </div>
                <div class="modal" id="myModal-<?php echo $i;?>">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body">
                                <?php echo $modal_video; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php   }$i++; // Increment the increment variable

endwhile; 
//End the loop 
else : 
endif; 
?>

2 Answers2

0

It looks like you use bootstrap modals. Bootstrap has an event listener on when a modal gets closed https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

Most time when I use a embed video, i place the src in a data attribute. When I open the modal I place the data-src in the src of the iframe. And when I close it I remove the src value to stop the video

Baracuda078
  • 677
  • 1
  • 5
  • 10
0

By emptying the attribute source of the video, it can be clearly one of the best ways from a personal point of view.

What you have to do is to empty the source of your iframe whenever you exit out the modal.

While you enter inside the video's modal, you can just reload your iframe.

var video_modal = $("#myModal");
 video_modal.on("shown.bs.modal", function(){
   $("#video").attr('src', "https://www.youtube.com/your-code-here"); /*therefore this must be the id of your iframe  */   
    
 $("body").click(function(){
    $("#video").attr("src", ""); // must be your iframe id also here
    video_modal.modal("hide"); // this is your modal id while you hide it
    $(".modal-backdrop").remove();
 });
});  

I have used this bit of code and it has worked to a page I was developping so I hope it can help you. Cheers

Oris Sin
  • 1,023
  • 1
  • 13
  • 33