【javascript】モーダルを閉じた際にモーダル内の動画を停止したい【micromodal.js】

前提・実現したいこと

素人ですがwordpressでホームページを作成しております。

micromodal.jsと言うプラグインを利用して、
モーダルを作成し、モーダルの中に動画(vimeo)を埋め込みました。
モーダルの表示、再生まではできたのですが、モーダルを閉じても動画が再生されたままで、
モーダルを閉じたと同時に再生停止したいのですが、うまくできず困っております。

方法がありましたらご教授いただけますと幸いです。

▼モーダル作成に参考にしたサイト
タブやモーダルなど、よく見かけるフロントエンドUIコンポーネントの紹介と実装サンプル集

▼利用プラグイン
micromodal.now.sh

該当のソースコード

html
1<button class="button" data-micromodal-trigger="modal-2">
2    <figure class="figure">
3            <img src="../img/common/movie_img.png" alt="movie" />
4    </figure>
5</button>
6
7<div class="modal" id="modal-2" aria-hidden="true">
8    <div class="modal-overlay" data-micromodal-close>
9        <div class="modal-container">
10            <div class="modal-content">
11                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/00000000?byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
12                <script src="https://player.vimeo.com/api/player.js"></script>
13            </div>
14            <div class="modal-footer">
15                <button class="close_button" data-micromodal-close>
16                    CLOSE
17                </button>
18            </div>
19        </div>
20    </div>
21</div>

javascript
1document.addEventListener('DOMContentLoaded', () => {
2    MicroModal.init({
3        awaitCloseAnimation: true
4    });
5});

css
1.figure {
2    position: relative;
3    img{
4        width: 100%;
5        height: 650px;
6    }
7    .video_play{
8        position: absolute;
9        left: 50%;
10        top: 55%;
11        transform: translate(-50%,-50%);
12        width: 50px;
13        img{
14            width: 100%;
15            height: auto;
16            vertical-align: bottom;
17        }
18    }
19}
20.button{
21    width: 100%;
22}
23.modal-overlay {
24    align-items: center;
25    background-color: rgba(0, 0, 0, 0.5);
26    display: flex;
27    justify-content: center;
28    opacity: 0;
29    pointer-events: none;
30    position: fixed;
31    z-index: 100;
32    top: 0;
33    right: 0;
34    bottom: 0;
35    left: 0;
36    transition: opacity 200ms linear;
37}
38.modal {
39    display: none;
40}
41.modal.is-open {
42    display: block;
43}
44.modal.is-open .modal-overlay {
45opacity: 1;
46pointer-events: auto;
47}
48
49.modal-container {
50    background-color: #fff;
51    border-radius: 6px;
52    min-width: 300px;
53    max-height: 90vh;
54    padding: 1rem;
55    transform: translateY(24px);
56    transition: transform 300ms ease-in-out;
57    width: 90%;
58    max-width: 650px;
59}
60.modal-content{
61    iframe{
62        width: 100%;
63        height: auto;
64    }
65}
66
67.modal-footer {
68margin-top: 1rem;
69text-align: right;
70}
71
72.close_button {
73    border: 0;
74    border-radius: 6px;
75    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
76    color: #000;
77    cursor: pointer;
78    line-height: 1;
79    outline: 0;
80    padding: 0.75rem 1rem;
81}
82/* アニメーション */
83.modal[aria-hidden="false"] .modal-overlay {
84animation: fadeIn 300ms ease-in-out forwards;
85}
86
87.modal[aria-hidden="false"] .modal-container {
88animation: slideIn 300ms ease-in-out forwards;
89}
90
91.modal[aria-hidden="true"] .modal-overlay {
92animation: fadeOut 300ms ease-in-out forwards;
93}
94
95.modal[aria-hidden="true"] .modal-container {
96animation: slideOut 300ms ease-in-out forwards;
97}
98
99@keyframes fadeIn {
100from { opacity: 0; }
101to { opacity: 1; }
102}
103
104@keyframes fadeOut {
105from { opacity: 1; }
106to { opacity: 0; }
107}
108
109@keyframes slideIn {
110from { transform: translateY(24px); }
111to { transform: translateY(0); }
112}
113
114@keyframes slideOut {
115from { transform: translateY(0); }
116to { transform: translateY(24px); }
117}