Как прописать, чтоб второй и третий трейлер при закрытии тоже останавливался и звук исчезал?

Как прописать, чтоб второй и третий трейлер при закрытии тоже останавливался и звук исчезал? Как первый.

Вот код первого.

[xfgiven_trailer]
<button type="button" class="btn btn-trailer" data-toggle="modal" data-target="#trailer">
<i class="fa fa-video-camera"></i><b>Трейлер</b>
</button>
<div class="modal fade" id="trailer" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="modal-body">
<div class="video-responsive">
<iframe src="[xfvalue_trailer]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
[/xfgiven_trailer]

Код второго и третий такойже только за место 2 стоит 3.

[xfgiven_trailer2]
<button type="button" class="btn btn-trailer" data-toggle="modal" data-target="#trailer2">
<i class="fa fa-video-camera"></i><b>Трейлер 2</b>
</button>
<div class="modal fade" id="trailer2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="modal-body">
<div class="video-responsive">
<iframe src="[xfvalue_trailer2]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
[/xfgiven_trailer2]

Страница на сайте. https://demsdems.ru/983-film.html

В коде не очень селён. Писать не могу, могу изменять.