Quiero que mi código reproduzca un video, pero cuando cierro el modal, la música del video aún se reproduce en segundo plano.
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe> </div> </div> </div> </div> </div>Intenté usar jquery para solucionarlo pero no pasa nada.
$(document).ready(function () { var $videoSrc; $('.btn-play').click(function () { $videoSrc = $(this).data("src"); }); console.log($videoSrc); $('#videoModal').on('shown.bs.modal', function (e) { $("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0"); }) $('#videoModal').on('hide.bs.modal', function (e) { $("#video").attr('src', $videoSrc); }) });Para hacer lo que necesita, puede detener o pausar la reproducción del video cuando se activa el evento hide.bs.modal .
Puede hacerlo enviando un postMessage al iframe que contiene el reproductor de Youtube incrustado. Tenga en cuenta que el parámetro enablejsapi=1 debe incluirse en la URL de inserción para que esto funcione.
He aquí un ejemplo simplificado:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div><a href="#" class="play-video">Play Video</a></div> <div><a href="#" class="stop-video">Stop Video</a></div> <div><a href="#" class="pause-video">Pause Video</a></div> <iframe class="embed-responsive-item" id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe> let videoIframeContent = $('#video')[0].contentWindow; // stop videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*'); // pause videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');Aquí hay una demostración de trabajo en un jsFiddle y el editor de fragmentos está en un espacio aislado y no permite videos.
Eso es porque el video no se detuvo.
En el oyente que escucha el evento hide.bs.modal :
const video = $('#video').get(0); video.pause(); video.currentTime = 0;