Bootstrap 5 Как остановить видео в iframe при переходе на другой таб?

Question

[almidi]

Добрый день! Подскажите в стандартных табах bootstrap 5 https://getbootstrap.com/docs/5.0/components/navs-... размещаю видео в iframe. При проигрывании видео если переходишь на другой таб видео продолжает проигрываться. Как сделать чтобы видео при переходе на другой таб останавливалось.

Comments

[historydev]

Вопрос требует жёсткой, бескомпромиссной конкретики. Какой плеер в это фрейме, откуда видео на фрейме и т.д.

[almidi]

Владимир,

<div class="tab-content">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="ratio ratio-16x9">
            <iframe src="//ok.ru/videoembed/2750944643666" title="" allowfullscreen=""></iframe>
        </div>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <div class="ratio ratio-16x9">
            <iframe src="//ok.ru/videoembed/2750944643666" title="" allowfullscreen=""></iframe>
        </div>
    </div>
    <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
        <div class="ratio ratio-16x9">
            <iframe src="//ok.ru/videoembed/2750944643666" title="" allowfullscreen=""></iframe>
        </div>
    </div>
    <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
        <div class="ratio ratio-16x9">
            <iframe src="//ok.ru/videoembed/2750944643666" title="" allowfullscreen=""></iframe>
        </div>
    </div>
</div>

<!-- Nav tabs -->
<ul class="nav flex-column tab-video" id="tab-video" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">таб 1</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">таб 2</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="messages-tab" data-bs-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">таб 3</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">таб 4</a>
    </li>
</ul>

Вот пример кода