Fechar modal com vídeo

[lamounier 0]

Estou desenvolvendo um site que carrega os últimos 6 vídeos adicionados, e quando clica em algum abre um modal para assistir o vídeo, quando fecho o modal o vídeo continua rodando, estou tentando fazer com que o vídeo pare mas não estou conseguindo.

home.php

<?php
                if (!empty($videos)) {
                    $i=0;
                    foreach ($videos $videos) { ?>
                        <div class="col-md-4">
                            <div class="ot-portfolio-item">
                                <figure class="effect-bubba">
                                    
                                    <div class="embed-responsive embed-responsive-16by9">
                                            <iframe width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                          </div>
                                    
                                    <figcaption>
                                        <a href="#" class="video-btn" id="#video_<?=$video["video_id"]?>" data-src="https://www.youtube.com/embed/<?=$video["link"]?>" data-toggle="modal" data-target="#video_<?=$video["video_id"]?>"></a>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>

                        <div class="modal fade"  id="video_<?=$video["video_id"]?>" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="X"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="Modal-label-1"><?=$video["titulo"]?></h4>
                                    </div>
                                    
                                    <div class="modal-body">
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <iframe id="video_iframe" width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                          </div>
                                        <div class="modal-works"><span><?=$video["autor"]?></span></div>
                                        <p><?=$video["video_description"]?></p>
                                    </div>
                                    
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default teste" data-dismiss="modal">Fechar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                <?php if (++$i == 6) break;} // FOREACH
                } // IF ?>
                </div>

 

.js

var videoSrc;
var videoId;


$('.video-btn').click(function() {
    videoSrc = $(this).data( "src" );
    videoId = $(this).data('target'); //aqui pego o id do modal

});


//aqui pauso o vídeo quando fecho o modal, mas só funciona se eu colocar diretamente o id "$('#video_...') "

$(videoId ).on('hide.bs.modal', function () {

    $("#video_iframe").attr('src',videoSrc);
})

 

alguém sabe como faço para o modal para o vídeo quando fechado?

[Jack Oliveira 1]

Eu uso este em alguns dos meus projetos e da certo

<script>
       ( function($) {



function iframeModalOpen(){

        $('.modalButton').on('click', function(e) {
            var src = $(this).attr('data-src');
            var width = $(this).attr('data-width') || 640; 
            var height = $(this).attr('data-height') || 360;

            var allowfullscreen = $(this).attr('data-video-fullscreen');

            $("#promo-video iframe").attr({
                'src': src,
                'height': height,
                'width': width,
                'allowfullscreen':''
            });
        });


        $('#promo-video').on('hidden.bs.modal', function(){
            $(this).find('iframe').html("");
            $(this).find('iframe').attr("src", "");
        });
    }

  $(document).ready(function(){
        iframeModalOpen();
  });

  } ) ( jQuery );
    </script>

Outra solução tbm seria assim

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
   $(".fechar").click(function(){
      $.each($('video'), function () {
           this.pause();
     });
   });
</script>

 

Para mais duvidas acesse aqui...

[lamounier 0]

Obrigado Jack Oliveira, o método que você postou não solucionou meu caso mas me deu uma luz e conseguir resolver da seguinte forma:

 

no arquivo bootstrap.js na função Modal.prototype.hide = function (e) {, adicionei o código

 

var aux=  this.$element.data('id');
    stopVideo(aux);

var aux=  this.$element.data('id');
    stopVideo(aux);

no home.php adicionei na div do modal:

data-id="video_<?=$video["video_id"]?>"

e o .js ficou apenas:

function stopVideo (str){
	
$('#'+str).on('hidden.bs.modal', function (e) {
    $('#'+str+" iframe").attr("src", $('#'+str+" iframe").attr("src"));
});
}