html - how can disable autopay and mute background sound in iframe

Question

I am playing video inside bootstrap modal, If I close modal video sound still playing in background. I want to mute background audio. Kindly help me

<div class="modal-body">
    <iframe src="video/VID-2021-1.mp4" autoplay="false" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
``

question from:https://stackoverflow.com/questions/65914017/how-can-disable-autopay-and-mute-background-sound-in-iframe

Answer 1

You must catch hidden modal event and after you can stop and mute the video.

Like this;

$('#modalId').on('shown.bs.modal', function () {
  var vid = document.getElementById("videoId");
  vid.pause();//stop to video
  vid.muted = true;//muted video
})